These docs are for v3.5. Click to read the latest docs for v5.0.

JPList tips

How to improve the JPList textbox search experience?

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
<input data-path=".title" class="form-control textfilter"
        type="text"
        value=""
        placeholder="Filter by Title"
        data-control-type="textbox"
        data-control-name="Title"
        data-control-action="filter"
        data-event-name="keydelay"       />
var isTyping = false;
var typingHandler = null;
var $textfilter = $(".textfilter", this);

$textfilter.on('input', function(context){
  if (isTyping) {
    window.clearTimeout(typingHandler);
  }
  else {
    isTyping = true;
  }

  typingHandler = window.setTimeout(function () {
    isTyping = false;
    $textfilter.trigger("keydelay");
  }, 1000);
});