Part1:
  <div>
    <span style="font-family: 宋体; font-size: medium;">![jQuery Mobile实现搜索框（图） - 东辰 - 我的博客](http://img1.ph.126.net/HQno7VSqxkMxHqHi__R9Ug==/6608266093561976161.png)</span>
  </div>
  
  

    <span style="font-family: 宋体; font-size: medium;"> </span><span style="font-family: 宋体; font-size: medium;"><section id=&#8221;page1&#8243; data-role=&#8221;page&#8221;>

    <span style="font-family: 宋体; font-size: medium;"> # jQuery Mobile</span>
  

  
  

    <span style="font-family: 宋体; font-size: medium;"> </header> </span>
  

  
  

    <span style="font-family: 宋体; font-size: medium;"> <div class=&#8221;content&#8221; data-role=&#8221;content&#8221;></span>
  

  
  

    <span style="font-family: 宋体; font-size: medium;"> ### Search Input

    <span style="font-family: 宋体; font-size: medium;"> <div data-role=&#8221;fieldcontain&#8221;>

<input type=”search” name=”search-restaurants” id=”search-restaurants” />

    <span style="font-family: 宋体; font-size: medium;"> </div> </span>
  

  
  

    <span style="font-family: 宋体; font-size: medium;"> </form></span>
  

  
  

    <span style="font-family: 宋体; font-size: medium;"> </div></span>
  

  
  

    <span style="font-family: 宋体; font-size: medium;"> <footer data-role=&#8221;footer&#8221;></span>
  

  
  

    <span style="font-family: 宋体; font-size: medium;"> # O&#8217;Reilly</span>
  

  
  

    <span style="font-family: 宋体; font-size: medium;"> </footer> </span>
  

  
  

    <span style="font-family: 宋体; font-size: medium;"></section> </span>
  

</div>

 
 
Part2:
``` 在列表上方，添加搜索框，只需要添加data-filter="true"就行。 ```
    ```

添加placeholder的方法：data-filter-placeholder=“Filter items…"

        
        <div>
          <span style="font-family: 宋体; font-size: medium;">![jQuery Mobile实现搜索框（图） - 东辰 - 我的博客](http://img1.ph.126.net/qidW7N5m4gEKWJi6znQCow==/2001287084512884007.png)</span>
        </div>
        
        ```
<span style="font-family: 宋体; font-size: medium;"> </span>

    ```

<ul data-role=“listview” data-inset=“true” data-filter=“true” data-filter-placeholder=“Filter items…">

        
        ```
<span style="font-family: 宋体; font-size: medium;"> </span>

    ```

此时，筛选是自动的。

        
        <div title="Page 67">
          <div>
            <div>
              <span style="font-family: 宋体; font-size: medium;">（If you begin typing in the previous field, the list automatically filters out the results</span><span style="font-family: 宋体; font-size: medium;">as you type）</span>
 
              
              <div>
                <span style="font-family: 宋体; font-size: medium;">![jQuery Mobile实现搜索框（图） - 东辰 - 我的博客](http://img0.ph.126.net/SRFRofm_Bj6mmEc3pYQtWA==/4852065648638601300.png)</span>
              </div>
              
              

                <span style="font-family: 宋体; font-size: medium;"> </span></div> </div> </div> </div> </div> </div> </div>

💬 评论