jQuery Mobile offers many great components to solve common user-experience problems. One such problem that often arises is how to handle search functionality. Search functionality often requires a database and can take some time to develop. In addition, search suggestions are becoming the norm these days, which can be a time-consuming feature to develop. jQuery Mobile answers this problem with search filtering via the search filter bar.
In this article, you learn how to use the search filter bar to create search functionality in the listview component. Then you also see how to create a custom search filter in case the default search functionality doesn’t meet your needs. This means you can run your own type of custom comparisons and return results that match. Visit https://github.com/studiosedition/JQM-Custom-Search-Filtering-Example to download the source code used in this article.
How to Create a Search Filter Bar
Search filter bars are a part of the functionality of the listview component. All search filter bars start with the listview component. The search filtering add-on is as simple as a data-filter attribute being applied to an unordered or ordered listview. This feature provides great usability improvements for long lists. Sometimes it’s just not possible to pare down all of the content that needs to go into a mobile website. When this is the case and you have a very long list, the search filter bar can be a great way to handle the problem. In jQuery Mobile, listview components can be formatted in a number of different ways, such as a basic linked, nested, numbered, and split button. They can also include list dividers, count bubbles, thumbnails, icons, and custom formatting. Figure 1 and the following code shows a custom formatted list of the latest web design and development articles on peachpit.com with a search filter bar.
In order to create this list, the jQuery and jQuery Mobile libraries need to first be included in your HTML document. Rather than downloading the libraries from their respective website, I’ve opted to (and recommend to) include direct references to them on the jQuery CDN (content delivery network). I recommend CDN-hosted files because the load time is faster. A CDN will distribute your content across multiple, geographically dispersed servers, so that the user who is accessing our web page receives the web files that are closest to them.
Once the libraries have been referenced in your HTML document, you can create your listview using a simple HTML list. In this case, I’ve created an unordered list with custom formatted content within each list item. Each list item includes a header, which is the title of the article, and a paragraph, which is an intro line to the article with a link to read more. This custom formatted content can include any HTML elements you choose, and you can truly be as creative as you need to be. What makes this ordinary list a listview is the addition of the data-role attribute in the opening ul tag. Setting this attributes value to listview tells the jQuery Mobile library to transform it into a mobile-friendly list that fills the full width of the web browser window.
To add a search filter to this listview, you simply need to add the data-filter attribute and set it to true. It really can’t get any easier than this, and it provides such great power.
For most cases, this incredibly easy-to-code, basic search filtering works just fine, but other times you may need to customize the way it compares the search string to the list items. Let’s see how to update the search filter to filter the results in a custom way.