---
agentTools:
  projectIndex: https://opencontent.readme.io/v3.2/llms.txt
---

# JPList tips

[block:api-header]
{
  "title": "How to improve the JPList textbox search experience?"
}
[/block]

When using a JPList textbox searchbox we advise you to improve the autocomplete experience by following these steps:

1. Add **data-event-name="keydelay"** attribute to input tag
2. Add "**textfilter**" class to input tag
3. Load the example javascript, on document ready, that you find here

[block:code]
{
  "codes": [
    {
      "code": "<input data-path=\".title\" class=\"form-control textfilter\"\n        type=\"text\"\n        value=\"\"\n        placeholder=\"Filter by Title\"\n        data-control-type=\"textbox\"\n        data-control-name=\"Title\"\n        data-control-action=\"filter\"\n        data-event-name=\"keydelay\"       />",
      "language": "html",
      "name": "template.hbs"
    },
    {
      "code": "var isTyping = false;\nvar typingHandler = null;\nvar $textfilter = $(\".textfilter\", this);\n\n$textfilter.on('input', function(context){\n  if (isTyping) {\n    window.clearTimeout(typingHandler);\n  }\n  else {\n    isTyping = true;\n  }\n\n  typingHandler = window.setTimeout(function () {\n    isTyping = false;\n    $textfilter.trigger(\"keydelay\");\n  }, 1000);\n});",
      "language": "javascript",
      "name": "template.js"
    }
  ]
}
[/block]