jQuery Mobile - Filterable Pre-rendering

Description

The filterable widget executes the filter one time during the startup to ensure that child list returns the entered value in search input. To prevent this, specify the data-enhanced = "true" attribute.

Whenever this attribute is set to true, it is assumed that you have correctly applied the uiscreen class to those children which must be hidden initially. The filterable widget uses the search input to determine whether the search input has pre-rendered itself or not.

Following example pre-renders both the search input and the filterable.

Example

Following example demonstrates the use of filterable pre-rendering in jQuery Mobile.

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Filterable Pre-rendering</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>
      <form>
         <div class = "ui-input-search ui-body-inherit ui-corner-all 
            ui-shadow-inset ui-input-has-clear">
            <input data-type = "search" data-enhanced = "true" data-inset = "false" 
               id = "pre-rendered-example-input" placeholder = "search cars..." value = "or" />
         </div>
         
         <div data-role = "controlgroup" data-enhanced = "true" data-filter = "true" 
            data-filter-reveal = "true" data-input = "#pre-rendered-example-input" 
            class = "ui-controlgroup ui-controlgroup-vertical ui-corner-all">
            <div class = "ui-controlgroup-controls">
               <a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-shadow 
                  ui-screen-hidden">Audi</a>
               <a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-first-child 
                  ui-shadow ui-last-child">Ford</a>
               <a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-shadow 
                  ui-screen-hidden">Hyundai</a>
               <a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-shadow 
                  ui-screen-hidden">Tata</a>
            </div>
         </div>
      </form>
      
   </body>
</html>

Output

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

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

jquery_mobile_widgets.htm

Kickstart Your Career

Get certified by completing the course

Get Started