Dedra L. Welch
 Software Engineer | IT Architect | Web Developer
Dedra L. Welch Software Engineer | IT Architect | Web Developer

jQuery Mobile Filterable Custom Select Widget


My goal with this new widget is to create a jQuery Mobile version of my UI Autocomplete extension. I started out by modifying (and correcting) the Filterable Inside Custom Select demo from jQuery Mobile and then turned it into a widget using the factory.

Try it out by clicking the drop downs and searching for one of your favorite Jazz recording - perhaps "Jazz Samba". Make a selection and then click the Show buttons to view the currently selected data object for each widget instance. The first select has a user defined default of Miles Davis' "Kind of Blue". The second has a user defined search prompt rather than a default value.

Like my UI autocomplete extension, this widget's data source is a JSON formatted object where the only required field is the "label":

 [{ "category": "Traditional", 
    "artist": "Benny Goodman", 
    "label": "Live at Carnegie Hall 1938 [Live]", 
    "year": "1950" },
 {  "category": "Traditional", 
    "artist": "Lester Young", 
     "label": "The President Plays with the Oscar Peterson Trio", 
     "year": "1952" },
 { "category": "Bebop", 
    "artist": "Charlie Parker", 
    "label": "Best of the Complete Savoy and Dial Studio Recordings [Compilation]", 
    "year": "2002" }]

and it retains the current selection's associated object accessible through the widget instance's "value" method. For example, the first option of the select displays the label "Live at Carnegie Hall 1938 [Live]" in the drop down. When this option is the current selection, the value method of the widget instance returns the object

{ "category": "Traditional", 
    "artist": "Benny Goodman", 
    "label": "Live at Carnegie Hall 1938 [Live]", 
    "year": "1950" } 

This allows our widget to hold a lot more information about the selected item than just the text value. And it provides this information in a more usable fashion - a JSON formatted Javascript data object.

The other options available in a jQMSelectFilterPro widget are:

searchprompt: null,  //text to display on the custom select button 
                     //and popup-dialog heading when no item is selected
maxitems: 0,         //maximum number of items to display when filtering (optional)
categoryfield: null, //field to use for option groups (optional)
filterReveal: false, //works like the normal jQM filterReveal (optional)
searchfields: [],    //an array that defines which data fields you want to search, 
defaultvalue: []     //default value to start with (optional)

The jQMSelectFilterPro widget also exposes the selectitem() method which accepts an array containing one object with a subset of data fields and then selects the matching data item. For example, [{ "artist": "Miles Davis", "label": "Kind of Blue" }] will match { "category": "Cool", "artist": "Miles Davis", "label": "Kind of Blue", "year": "1959" } from our source data and will make it the currently selected item.