Here you can learn Step by step How to create a jQueryMobile Collapsible Filterable List with Search For Android and BlackBerryIn this article we build a jQuery Mobile App, with several Lists with Filter search functionality, Collapsible and with Grouping , for use on all kind of Mobiles : iPhone, BlackBerry, iPad, Nexus , Acer , Nokia, etc...
The code for this tutorial can be downloaded from the following GitHub repository:
This Mobile App will look like this:
How to create a jQueryMobile Collapsible Filterable List with Search
Since here we'll use the jQuery Mobile and the jQuery Frameworks, enter http://jquerymobile.com/ and jQuery web site , and get the latest versions of the frameworks, on CDN . We will be using a Mobile Emulator, so refer to this tutorial on installing the Ripple FREEEmulator.
Refer to the frameworks at the Head of the HTML5 file:
Add a data-role="page" to our web Page , and a data-role="header" fixed with a NavBar :
Then add a Footer as follows:
And also a page for the Dialog that we'll open from the Lists buttons:
1) Simple Lists :
First we create a simple List by adding the directives data-role=listview and data-inset=true to a regular ul element as follows:
Let's browse to this page using the Ripple Emulator to see our App:
2) Lists with Split and Buttons:
Next, we exemplify a List which contains Buttons and a Separator(using data-role=divider):
By adding two <a> hyperlinks to each list item, automatically the second turns into a button.
Save and browse to see how the list is displayed:
3) Collapsible Lists :
Our next List will exemplify a Collapsible List, using the directive data-role=collapsibleset and data-role=collapsible:
This is how it is shown:
1) Filterable Lists with Search Control :
Now we create a List searchable, by adding a Form and the directives data-type-search, data-filter=true, and data-input :
The data-autodividers add automatically Dividers alphabetically :
Then you can perform a search: