Question

Im using the jQuery mobile search filter list:
http://jquerymobile.com/test/docs/lists/lists-performance.html

Im having somer performance issues, my list is a little slow to filter on some phones. To try and aid performance I want to change the search so only items starting with the search text are returned.

So ‘aris’ currently finds the result ‘paris’ but I want this changed. I can see its possible from the documentation below but I dont know how to implement the code.

http://jquerymobile.com/test/docs/lists/docs-lists.html

$("document").ready( function (){
  $(".ui-listview").listview('option', 'filterCallback', yourFilterFunction)
});

This seems to demonstrate how you write and call your own function, but ive no idea how to write it! Thanks
http://blog.safaribooksonline.com/2012/02/14/jquery-mobile-tip-write-your-own-list-view-filter-function/

UPDATE – Ive tried the following in a seperate js file:

$("document").ready( function (){

  function beginsWith( text, pattern) {
  text= text.toLowerCase();
  pattern = pattern.toLowerCase();

  return pattern == text.substr( 0, pattern.length );
  }

  $(".ui-listview").listview('option', 'filterCallback', beginsWith)

});

Answer 1

might look something like this:

function beginsWith( text, pattern) {
text= text.toLowerCase();
pattern = pattern.toLowerCase();

return pattern == text.substr( 0, pattern.length );
}

Basically you compare from 0 to “length” of what you’re matching to the source. So if you pass in “test”,”tester” it will see you’re passing in a string of length 4 and then substr “tester” from 0,4, which gives you “test”. Then “test” is equal to “test”… so return true. Lowercase them to make it case insensitive.

Another trick to improve filter performance, only filter once they’ve entered more than 1 character.

edit it appears jQueryMobile’s filter function expects that “true” means it was not found… so it needs to be backwards. return pattern != text.substr( 0, pattern.length );