jQuery Mobile - Filter Styling

Description

You can set a specific theme for the text field using data-filter-theme and also provide a placeholder by using data-filter-placeholder.

Additionally, the widget will provide the synchronize options, which will be shared between the widget of the textinput and the widget whose children it filters. This ensures that, the textinput widget option's value is the same as the widget option's value.

For instance, whenever data-inset = "true" is set on listview, then the respective textinput widget will also be inset.

Example

Following example demonstrates the use of filter styling in jQuery Mobile.

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Filter Styling</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <ul data-role = "listview" data-filter = "true" 
         data-filter-placeholder = "Find cars..." data-filter-theme = "a" 
         data-inset = "true">
         <li>Audi</li>
         <li>BMW</li>
         <li>Ford</li>
         <li>Hyundai</li>
         <li>Mahindra</li>
         <li>porsche</li>
         <li>Renault</li>
         <li>Toyota</li>
      </ul>
   </body>
</html>

Output

Let's carry out the following steps to see how the above code works −

Save the above html code as filterable_styling.html file in your server root folder.
Open this HTML file as http://localhost/filterable_styling.html and the following output will be displayed.

jquery_mobile_widgets.htm