Recently started working in jQuery Mobile Framework and came upon a use case where I wanted a list to be filtered during the page load. jQuery Mobile has a great search filter that lets you narrow down lists really quickly. I wanted to be able have all of my data in a list, and then prefilter it with a type of record. Then I could later (not in the scope of this article), use a drop down to swap list types completely without needing to load any new data at all. Anyhow, here’s my snippet if it helps anyone.
<ul id="myList" data-mini="false" data-role="listview" data-filter="true" data-inset="true">
<li data-role="list-divider">Leads</li>
<li data-filtertext="myText someNoneFilterText">A non-related label</li>
</ul>
<script>
$(document).bind("pageshow", function( event, ui){
var preFilterText = "myText";
var listId = "myList";
$("#" + listId + " li").each(function(i) {
$(this).attr("data-filtertext").toString().indexOf( preFilterText ) === -1 ? $(this).hide() : null;
});
$("#" + listId).listview('option', 'filterCallback', function (text, searchValue, item) {
return preFilterText && text.toString().indexOf( preFilterText ) === -1 ? true : text.toString().toLowerCase().indexOf( searchValue ) === -1;
});
});
</script>
