jQuery Mobile - Filterable Pre-rendering


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.


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

<!DOCTYPE html>
      <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>

         <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 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 
               <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 
               <a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-shadow 


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.

Kickstart Your Career

Get certified by completing the course

Get Started