jQueryMobile Collapsible Filterable List with Search

Here you can learn Step by step How to create a jQueryMobile Collapsible Filterable List with Search For Android and BlackBerry

In 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:
https://github.com/CarmelSoftware/jQueryMobile_Lists
This Mobile App will look like this:

And this is how it is showed on an emulator:

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.

The  First jQuery Mobile App Tutorial includes a more in depth explanation about the frameworks and the emulator.

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:

We customize this Mobile App with some style in a CSS3 file as follows:

That's all....

Hoping this article was helpful  ...

Happy programming.....

      by Carmel Schvartzman

כתב: כרמל שוורצמן