So I'm trying to write a custom search function a listview dom using filterCallBack. The listview dom is a ul that is auto-populated with li
HTML
<div data-role="page" id="home">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content" id="client_list_div">
<ul data-role="listview" data-autodividers="true" data-filter="true" id="client_list" data-filter-placeholder="Search" >
<li data-filtertext="Appleseed John 456789 234232 [email protected]"><a href="#">John Appleseed</a></li>
<li data-filtertext="Another Name 09876 654322 [email protected]"><a href="#">Another Name</a></li>
</ul>
</div>
</div>
JavaScript/jQuery
The li elements are populated with an ajax call using jQuery. I am trying to override the default search function. I don't have the logic for my search function yet. Just trying to trigger a custom search function first. I have tried the following to no avail:
$('#client_list').listview('option', 'filterCallback', customSearch);
AND this from a tutorial (http://www.peachpit.com/articles/article.aspx?p=1929169&seqNum=2)
$('div#client_list_div').on('mobileinit', function(event){
$('#client_list').listview('option', 'filterCallback', customSearch);
})
AND this from jQuery documentation (http://demos.jquerymobile.com/1.4.0/filterable/#ui-page-top)
$.mobile.document.one( "filterablecreate", "#client_list", function() {
$( "#client_list" ).filterable( "option", "filterCallback", customSearch
});
This is the search function: (don't have the logic down right now but I have an alert in the function to know everytime it's called)
function customSearch(text, searchString)
{
return !((text.toLowerCase().indexOf( 'adfs' ) != -1) && (searchString == 'adfs'));
alert("match function called!");
}
The tutorials seem simple but can't figure out why I'm not able to get it to work?
I'm using jQuery 1.11.1 and jQuery Mobile 1.4.5