Posted on by & filed under Content - Highlights and Reviews, Mobile Development.

Let’s take a look at another jQuery Mobile tip that can help you when developing your list views.

By using the data-filter="true" attribute to add a search filter box to a list view, you make it easier for users to navigate through a long list. The user can type a few letters of the item they’re looking for into the filter box to narrow down the list.

By default, when a user types some text into a list view’s search filter box, jQuery Mobile hides any list items that don’t contain the typed text string anywhere in the item text. It does this using the following built-in filter function:

You can, if you like, replace this default function with your own custom filtering function, like this:

Your custom function needs to accept two arguments, in the following order:

  • The text inside the list item that jQuery Mobile is currently testing
  • The search text entered by the user, converted to lowercase

The function should return true if the currently-tested item should be hidden from the list, or false if it should be left in the list.

For example, the following filter function only includes an item in the filtered list if the user types the entire text contained in the item:

You can then associate this custom filter with a list view as follows:

This tip should help you customize your list views, allowing your users to find what they need that much quicker.

Safari Books Online has the content you need

Here are some good jQuery Mobile resources found in Safari Books Online:

Pro jQuery Mobile will teach you how to create themable, responsive, native-looking applications for iOS, Android, Windows Phone, Blackberry, and more.
jQuery Mobile provides a practical approach to using jQuery Mobile to quickly develop web-based applications for mobile devices.
jQuery Mobile First Look will show you the features of the jQuery Mobile framework, what they do, and how they can be used.
jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples is a practical “cookbook” packed with realistic, easy-to-use solutions for making the most of jQuery Core, jQuery UI, and jQuery Mobile.

About the Author

  Matt Doyle is an experienced technical author and coder who has written three well-received books on jQuery Mobile, PHP and Photoshop. He has also written articles for and on a variety of topics, including jQuery Mobile, jQuery, JavaScript, PHP, HTML and CSS. Learn more about jQuery Mobile with Matt’s comprehensive eBook, “Master Mobile Web Apps with jQuery Mobile”. It’s available for instant download at

Tags: Filter, jQuery Mobile, List view,

5 Responses to “jQuery Mobile Tip: Write Your Own List View Filter Function”

  1. Anonymous

    amazing stuff. thnx but i seem to have a problem. I am doing this

    $(“#program”).live(‘pageinit’, function(evt) {
    $(‘#prog_list’).listview( ‘option’, ‘filterCallback’, customMatch );

    customMatch = function( text, searchValue ){

    searchValue = “Semester: B”;
    return text.toLowerCase().indexOf( searchValue ) === -1;;

    and although i have Semester: B in my text (i print it) it always returns true (no match-hide it).
    Thnx for your time and effort

  2. Matt

    @Anonymous: Why are you setting searchValue inside your list view filter callback?

    You haven’t posted your whole page code, but check that your list view ul element actually has an ID of “prog_list”, and that your callback is being defined. Do you know that your callback is actually being called? (use console.log() inside it to find out.)

  3. camcollins

    @Matt – I tried this example on something I am working on and couldn’t get it to work right. So I just bought your eBook and BAM I found out what I was doing wrong and it worked. Totally worth $19 to me as I am sure I will learn a ton more from it.

  4. ellipsis

    @Matt and @Camcollins –

    I noticed there are multiple JQM books available. What book do you suggest for an (experienced) intermediate to advance developer?

    Thank you!

    • Cam Collins

      Matt’s book is the only one I have ever bought on the subject. “Master Mobile Web Apps with JQuery Mobile”. A second edition was recently released.