jquery Mobile filterable listview custom search function (filterCallBack) not triggered

687 Views Asked by At

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

0

There are 0 best solutions below