Vishal Kumar Vishal Kumar - 1 year ago 132
jQuery Question

jquery mobile: how to prevent the header row of a list view from getting filtered out

I am creating a jquery mobile listview that can be filtered on it's content like below:

<ul data-filter="true" ...>
<li class='thisrowshouldnotbefilteredout'></li>
<li>content to filter on</li>

The first row is my header and I don't want it to hide when user enters text to filter on. Is there an attribute I can give to this row, or will I have to override the base call back function for fitering?

Answer Source

You can override filter logic like this:

$("#mylist").listview('option', 'filterCallback', customSearch);

var customSearch = function(text, searchValue, item) {
    return text.toLowerCase().indexOf( searchValue) === -1;

Any function defined for the callback will be provided three arguments. First, the text of the current list item, second the value being searched for, and third the list item being filtered. A truthy value will result in a hidden list item. The default callback which filters entries without the searchValue as a substring is described below.

Use it to skip your header li element. Modify it as you wish.

Example and more about this can be found here:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download