jQuery Mobile - Filter Custom Callback

Description

As with the extension of the listview, callback function can be provided to the filter or even override the filter entirely on the filterablebeforefilter event. Before the filter fires actually, it takes a delay of 250ms. This avoids the filtering function to run many times while the user is typing.

To create a new default for all filterable widgets, set a custom filtering function, override the filtercallback option in widget prototype in a mobileinit signal handler as shown in the following code.

$( document ).one( "mobileinit", function() {
   $.mobile.filterable.prototype.options.filterCallback = function( index, searchValue ) {
      // The this keyword in this function refers to the element
      // for the code which decide whether or not to filter.
      // The true return value shows that the element referred
      // to by this keyword is to be filtered.
      // If returns false specifies that the item is to be displayed.
      //
      // Custom filtering logic goes here.
   });
});

By setting the filterCallback options, you can set a custom filtering function for a single filterable widget as shown in the following code.

$.mobile.document.one( "filterablecreate", "#myFilterable", function() {
   $( "#myFilterable" ).filterable( "option", "filterCallback", 
      function( index, searchValue ) {
      // The above example explains the callback function's signature.
      //
      // Custom filtering logic goes here.
   });
});  

To override the filter completely (for instance, whenever loading the data server-side or from localStorage), bind to the filterablebeforfilter event as shown in the following code.

$( ".selector" ).on( "filterablebeforefilter", function( e, data ) {
   var value;

   e.preventDefault();
   value = data.input.value;
   // trigger own request to database
});