The filterable widget provided by jQuery Mobile (jQM) allows the user to filter child elements by typing search text into a text box. The built-in behavior is to see if the search text is contained in any of the children elements’ text or a special data attribute called data-filtertext. But what if you want the filter to only show elements that start with the typed in search text?
To accomplish this, we can override the default filtering by assigning the filterCalback property to a function. This function is then called for each child element with an index parameter and a second parameter for the search text the user typed. Within this function we can perform our own filter matching and return true if the child element should be filtered (hidden). So, lets build our Starts With Filter. Continue reading
The listview widget in the jQuery Mobile (jQM) library allows for divider listitems which can be inserted manually or for sorted lists even be created automatically by the library. The dividers organize larger sets of listitems into smaller groups making it easier for the user to view the desired information. In this article I will implement a small trick that uses clicks/taps on the divider items to collapse expand the listitems in the divider group. This works particularly well for autodivider lists saving you the need to manually create collapsible widgets with separate contained lists.
For the example I will use a longish list of names with autodividers enabled. The markup for the list looks like this: Continue reading
jQuery Mobile (jQM) provides a listview widget that works well in most scenarios to provide a nice looking vertical list familiar to users of mobile devices. If you include an image in the list item markup, jQM will automatically format it as an 80px by 80px thumbnail on the left side. If the provided image is smaller than 80×80 it sits at the top left corner; and if it is larger than 80×80 and not square it will also sit at the top left corner and either fill the width or the height but not both.