Jquery Mobile - Filtering the Listview

So you have a very long list of items and you want to provide the users with a searching facility. There is nothing to worry here. Jquery Mobile provides a very simple solution to a very difficult and time-comsuming looking problem. jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the data-filter="true" attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. The input's placeholder text defaults to "Filter items...".

Now again, this is not going to satisfy the client. The client will not like the default search and will ask for customization. No problem again. We can do it very easily again by virtue of the Jquery Mobile framework. To configure the placeholder text in the search input, use the data attribute "data-filter-placeholder" on your listview. By default the search box inherits its theme from its parent. The search box theme too can be configured using the data attribute "data-filter-theme" on your listview. So now you have a customized filterable listview.

Following is a simple example of how the search works with the listview. Hope you have follow the example here. Do drop a comment in case you have any doubt or want to see something more in this post or on the blog in general.

Comments

Recommended for You

CSS Text and Font

In this post today, we will take a look at some of the most interesting CSS text and font properties listed below. text-transform white-space word-break word-spacing word-wrap font-variant Text-transform property: Let's begin with the text-transform property. The filler text used in all the examples below has been taken from Andy Matthew's filler text generator which is a humorous replacement to the traditional boring lorem ipsum . The text-transform property will turn your text to uppercase, lowercase and also will capitalize the first character of every word. So now you don't need any javascript to do your bidding. This transformation will be done irrespective of the special characters preceding and following the text characters. The following example will make things much more clear and editable of course =) White-space property: The next property to explore is the white-space proper...

Geodesic, Draggable Onclick Polygon

After creating a simple polygon and then creating an on-click polygon, we will today see how to create a polygon which can be changed, altered, dragged; basically edited on the fly. We will also cover the geodesic polygon in this example itself. If you want to read and understand more about what "geodesic" is, read this post. Nothing exceptional about the code that I think needs explanation! You can create a geodesic polygon which can be edited on the fly. Click, hold and drag any marker, and the two polylines connected by this marker will change accordingly. By clicking on the marker, that marker would disappear, and the polygon will reform itself! Here is today's code. You can copy the above code in a text file and save it with .html extension. Click on this file; it will open in your default browser and you will see an exciting map in action! The output of the above code appears as seen in the result section above! If yo...

Playing with the markers and info window bubbles...

In the last few posts, we have seen some marker examples and some information window examples. Now, lets do something interesting combining these two things. Just writing that "This is an info window" in the information bubble is not very interesting! And I know this...Have gone through the same phase! So, today we will do something interesting! We will display the latitude- longitude co-ordinates of the point that the user clicks on the map! Doing this is not at all complex! Copy paste the following code and you will see for yourself a map coming to life! The output of the above code looks as seen in the result section above! If you have any queries regarding the above code please comment on the blog post or feel free to contact me at my mail ID .

Two maps on the same page - Side-by-side

How good I am feeling to post a code example after such a long time! It's been all "news" over the past so many posts! Well now that I am finally doing a code example, I am posting a very highly requested code sample. Placing two Google Maps on the same page (Now that's simple you would say!), but side by side. Now this is the thing that most people struggle with. Well, implementing the second part is also very simple, as you will see in today's code. Let's see the code. Here it is! The output of the above code will be as seen in the result section above. As most of you will realize, there are two maps, one centered at "Pune" and other at "Noida". Why I chose these two locations? Well, just like that!...The main issue of concern is how the maps appeared side-by-side and not one below the other as would be normal behavior of two "div" elements used in the same page. Now here is the trick! Check out the...

KML Layer Example

Until now, we have covered various examples involving markers, polylines, polygons, i.e. creating overlays. We have also seen other examples to remove overlays! We will now move on to some other concepts. Today we will have a look at what KML is and how to create a KML layer! Let us first understand what KML is and why is it necessary. KML stands for Keyhole Markup Language which is an XML schema for expressing geographic annotation and visualisation within 2D maps and 3D Earth browsers. The KML file specifies a set of features (place marks, images, polygons, 3D models, textual descriptions, etc.) for display in Google Earth, Maps and Mobile, or any other 3D Earth browser (geobrowser) implementing the KML encoding. Each place always has a latitude and a longitude. Other data can make the view more specific, such as tilt, heading, altitude, which together define a "camera view". ...

The UI Dev

Search This Blog