JPList tips

Strange or no JpList filter results

When you experience strange or no results of your filters, please make sure you don't have any HTML errors in your modules template. Especially when using JPList to filter data that's rendered server-side (without WebApi callbacks) one HTML error can lead to very strange filtering results.

Using JpList Text Search with a complex data schema

When you try to add a client side JpList Text Filter like this:

<input data-path=".title" class="form-control textfilter"
 type="text"
 value=""
 placeholder="Filter op Titel of Persoon"
 data-control-type="textbox"
 data-control-name="Title,People.Name"
 data-control-action="filter" 
 data-event-name="keydelay" />

The attribute; "data-control-name" controls what fields to Search in.
But by default Open Content will not find anything for the "People.Name" field
The reason for this is that Open Content will only index "root items" (for it's own internal Lucene index).
If you want data on another level to be indexed, you have to check the "index" box in the Builder for that field and the other fields you want to get indexed. If you do that Open Content will create a index.json file with what fields to index.

🚧
This is Lucene index not related to the DNN Search index.

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:

Add data-event-name="keydelay" attribute to input tag
Add "textfilter" class to input tag
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);
});

// Block Enter key on Search field
$textfilter.keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });

This will delay the Search API call so the results make more sense when typing and it will block the [ENTER] key on the field (which will otherwise reset the search results).

Upgrading JPlist and using other filter controls

When you use JPList with a client side template, you should realise that Open Content has the needed AJAX calls built in.
These are defined here: https://github.com/sachatrauwaen/OpenContent/blob/master/OpenContent/Components/JPList/JplistQueryBuilder.cs

This also means that you cannot simply upgrade the JPList JS files as the defined calls are liked to the JSList version. So unless you define your own calls, you cannot upgrade JPList to version 5.2 or the latest JQuery less version