JQuery Mobile in Hindi Filters

First Page
Next Page

jQuery Mobile Filter में दी गई List और Element के दिए गए Set में Items को कैसे Filter करें ये Explains करता है.

jQuery Mobile में data-filter="true" को अच्छे से Set करके किसी भी element के Children को Filter किया जा सकता है.

Basic Filter

Basic Filter पुरे Widget पर Based होते है और यह Listview Filter Extension को बदल देता है.

इसलिए आप Listview पर List Filter के लिए एक List को बनाने के लिए data-filter="true" को Set कर सकते हो.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Basic Filter Example</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>
         <input data-type = "search" id = "searchForCollapsibleSetChildren">
      </form>
      
      <div data-role = "collapsibleset" data-filter = "true" data-children = "> div, 
         > div div ul li" data-inset = "true" id = "collapsiblesetForFilterChildren" 
         data-input = "#searchForCollapsibleSetChildren">
         
         <div data-role = "collapsible" 
            data-filtertext = "India Bengaluru Chennai Mumbai New Delhi">
            <h3>India</h3>
            <ul data-role = "listview" data-inset = "false">
               <li data-filtertext = "India Bengaluru">Bengaluru</li>
               <li data-filtertext = "India Chennai">Chennai</li>
               <li data-filtertext = "India Mumbai">Mumbai</li>
               <li data-filtertext = "India New Delhi">New Delhi</li>
            </ul>
         </div>
      
         <div data-role = "collapsible" 
            data-filtertext = "Australia Canberra Sydney Perth Melbourne">
            <h3>Australia</h3>
            <ul data-role = "listview" data-inset = "false">
               <li data-filtertext = "Australia Canberra">Canberra</li>
               <li data-filtertext = "Australia Sydney">Sydney</li>
               <li data-filtertext = "Australia Perth">Perth</li>
               <li data-filtertext = "Australia Melbourne">Melbourne</li>
            </ul>
         </div>
      
         <div data-role = "collapsible" 
            data-filtertext = "United Kingdom London Birmingham Cardiff Glasgow">
            <h3>United Kingdom</h3>
            <ul data-role = "listview" data-inset = "false">
               <li data-filtertext = "United Kingdom Canberra">London</li>
               <li data-filtertext = "United Kingdom Birmingham">Birmingham</li>
               <li data-filtertext = "United Kingdom Cardiff">Cardiff</li>
               <li data-filtertext = "United Kingdom Glasgow">Glasgow</li>
            </ul>
         </div>
      </div>
      
   </body>
</html>

Output

Filter Reveal

Filter Reveal को Feature के Local Data के साथ एक सामान्य Autocomplete बनाने के लिए बहुत आसान बनाता है.

जब किसी Filter मे data-filter-reveal="true" विशेषता होती है तो उसके Search Field के Blank होने पर भी सभी List Items को Hide करना पड़ता है.

Filter मे Placeholder Text को Specify करने के लिये data-filter-placeholder विशेषता को Add किया जा सकता है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Filter Reveal Example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>
   <body> 
      <form class="ui-filterable">
         <input id="filter1" data-type="search" placeholder="Search">
      </form>
      <ul data-role="listview" data-filter="true" data-input="#filter1">
         <li><a href="http://tutorialsroot.com/">Tutorialsroot</a></li>
         <li><a href="http://tutorialsroot.com/">Tutorialsroot .com</a></li>
         <li><a href="#">Safari</a></li>
      </ul>
      <form class="ui-filterable">
         <input id="filter2" data-type="search" placeholder="Search">
      </form>
      <ul data-role="listview" data-filter="true" data-input="#filter2">
         <li data-filtertext="browser"><a href="#">Google Chrome</a></li>
         <li><a href="#">Firefox</a></li>
         <li><a href="#">Safari</a></li>
      </ul>
      <form class="ui-filterable">
         <input id="filter3" data-type="search" placeholder="Search">
      </form>
      <table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" data-column-btn-text="Click here!" id="mytable" data-filter="true" data-input="#filter3">
         <thead>
            <tr>
               <th data-priority="6">Employee ID</th>
               <th>Employee Name</th>
               <th data-priority="1">Employee Email-ID</th>
               <th data-priority="3">Employee Phone Number</th>
               <th data-priority="4">Employee Country</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Ed01</td>
               <td>John B</td>
               <td>john@gmail.com</td>
               <td>0895634231</td>
               <td>US</td>
            </tr>
            <tr>
               <td>Ed02</td>
               <td>Lewis</td>
               <td>lewis@gmail.com</td>
               <td>0895894231</td>
               <td>Germany</td>
            </tr>
            <tr>
               <td>Ed03</td>
               <td>Krish</td>
               <td>krish@gmail.com</td>
               <td>0892394231</td>
               <td>UK</td>
            </tr>
         </tbody>
      </table>
      <form class="ui-filterable">
         <input id="filter4" data-type="search" placeholder="Search Country">
      </form>
      <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-inset="true" data-input="#filter4">
         <li><a href="#">India</a></li>
         <li><a href="#">United Kingdom</a></li>
         <li><a href="#">Germany</a></li>
         <li><a href="#">United States</a></li>
         <li><a href="#">South Africa</a></li>
         <li><a href="#">Austrelia</a></li>
      </ul>
   </body>
</html>

Output

First Page
Next Page