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

Question

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>

......

......

</ul>

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 1

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: http://jquerymobile.com/test/docs/lists/docs-lists.html

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

Sign up