Monday, June 1, 2015

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:
jQueryMobile Collapsible Filterable List with Search

jQueryMobile Collapsible Filterable List with Search    1

jQueryMobile Collapsible Filterable List with Search   2




And this is how it is showed on an emulator:
jQueryMobile Collapsible Filterable List with Search     3



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:
jQueryMobile Collapsible Filterable List with Search   4




Add a data-role="page" to our web Page , and a data-role="header" fixed with a NavBar :
jQueryMobile Collapsible Filterable List with Search    5

Then add a Footer as follows:
jQueryMobile Collapsible Filterable List with Search   6



And also a page for the Dialog that we'll open from the Lists buttons:
jQueryMobile Collapsible Filterable List




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:


jQueryMobile Collapsible Filterable

Let's browse to this page using the Ripple Emulator to see our App:

jQueryMobile Collapsible





2) Lists with Split and Buttons:

Next, we exemplify a List which contains Buttons and a Separator(using data-role=divider):

jQueryMobile
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:
  Collapsible Filterable List with Search







3) Collapsible Lists :

Our next List will exemplify a Collapsible List, using the directive data-role=collapsibleset and data-role=collapsible:
  Filterable List with Search


This is how it is shown:
  List with Search



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 :
jQueryMobile   Filterable List


The data-autodividers add automatically Dividers alphabetically :

 Mobile   Filterable List

Then you can perform a search:


jQuery  Collapsible   List with Search


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

  List with Search    1



That's all....
Hoping this article was helpful  ...
Happy programming.....

      by Carmel Schvartzman


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