Modify search in jQuery Mobile listview autocomplete.

These examples were developed with jQuery Mobile 1.3.2. Last time I checked we were up to v1.4.3. Many things have changed since 1.3.2 especially with Listview widget, so proceed with caution...

The default behavior in the jQM listview autocomplete listview is a wildcard search anywhere in string. In this example we modify the search to match only on first three characters of each string in the search. This is based on example at http://www.peachpit.com/

Notice in this example only matches on first three characters are shown.

Code is the same as previous example, except for changed/added lines below.


 Example


		
    
    // add a listener to override search method every time we add an autocomplete box
    $(document).on("listviewcreate", ".autocomplete", function (e, ui) {               
        $('.autocomplete').listview('option', 'filterCallback', srSearchFirstThreeCharacters);
    });           


    // for autocomplete search override to search function called srSearchFirstThreeCharacters
    $('div#preActTab').on({ pageinit: function(event) {           
            $('.autocomplete').listview('option', 'filterCallback', srSearchFirstThreeCharacters);
        }
    });
   
    // override search function - if match on first three characters, then return false
    function srSearchFirstThreeCharacters( text, searchValue ) {           
        if (text.substring(0,3) === searchValue){                   
            return false;
        }
        else{       
            return true;
        }       
    }