Custom Search Filtering with jQuery Mobile
- How to Create a Search Filter Bar
- How to Create Custom Search Filters
- Conclusion
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Listview with search filtering</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css />
<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Web Design & Development</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li>
<h2>HTML5 Multimedia: Using Video with Canvas</h2>
<p>In addition to native multimedia, one of the most talked about
capabilities that HTML5 brings to the web table is the ability
to draw and manipulate graphics using JavaScript via the new
canvas element. The element defines an area on a web page that
you can draw on using a JavaScript API. Ian Devlin shows you
how to use it.</p>
<p><a href="http://www.peachpit.com/articles/article.aspx?p=1760497">Read more</a></p>
<li>
<h2>The Inspiration Bookshelf: The Best Books for Design, Learning
and User Experience</h2>
<p>Julie Dirksen, author of Design For How People Learn, shares
her "Inspiration Bookshelf" for designers, listing books and
websites that are special, not only in the content, but also
in the way that they were written and designed.</p>
<p><a href="http://www.peachpit.com/articles/article.aspx?p=1907487">Read more</a></p>
</li>
<li>
<h2>Project Objectives and Approach for UX Designers:
Know Which Star to Navigate By</h2>
<p>This chapter covers forming objectives for your project
and offers some questions that will help you solidify
those goals. You'll also learn some common project
approaches (or methodologies) and how they may
influence the way you work.</p>
<p><a href="http://www.peachpit.com/articles/article.aspx?p=1856033">Read more</a></p>
</li>
<li>
<h2>Using Web Fonts in Adobe Dreamweaver CS6</h2>
<p>The @font-face rule allows you to use non-Web-safe
fonts by defining the location of a font resource,
which can be either local to your machine or external.
As of CS 5.5, Dreamweaver supports @font-face. Tom Negrino
and Dori Smith show you some examples in this excerpt
from Dreamweaver CS6 Visual Quick Start.</p>
<p><a href="http://www.peachpit.com/articles/article.aspx?p=1860944">Read more</a></p>
</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>© 2012 Pearson Education, Peachpit Press. All rights reserved.</h4>
</div>
</div>
</body>
</html>
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.