如何使用jQuery Mobile過濾可摺疊設置？

我有一個簡單的可摺疊設置，我想過濾單個過濾器，它將顯示在集合之上。期望的結果是僅查看與我的搜索匹配的項目（不是項目出現的整個可摺疊塊）。如何使用jQuery Mobile過濾可摺疊設置？

請告知如何處理這個任務......

<div data-role="content"> 
    <div data-role="collapsible-set"> 
     <div data-role="collapsible" data-content-theme="c"> 
      <h3>Firs Collapsed list</h3> 
      <ul data-role="listview" data-inset="false" data-theme="d"> 
       <li><a href="index.html">Acura</a></li> 
       <li><a href="index.html">Audi</a></li> 
       <li><a href="index.html">BMW</a></li> 
      </ul> 
     </div> 
     <div data-role="collapsible" data-content-theme="c"> 
      <h3>Second Collapsed list</h3> 
      <ul data-role="listview" data-inset="false" data-theme="d"> 
       <li><a href="index.html">Cadillac</a></li> 
       <li><a href="index.html">Chrysler</a></li> 
       <li><a href="index.html">Dodge</a></li> 
      </ul> 
     </div> 
     <div data-role="collapsible" data-content-theme="c"> 
      <h3>Third Collapsed list</h3> 
      <ul data-role="listview" data-inset="false" data-theme="d"> 
       <li><a href="index.html">Ferrari</a></li> 
       <li><a href="index.html">Ford</a></li> 
      </ul> 
     </div> 
    </div><!--/content-primary --> 
</div>

來源

2012-08-13 Victor

你可以把你data-role="collapsible"元素在data-role="listview"元素的列表項可以有data-filter="true"屬性來自動創建一個過濾器的搜索裏面輸入。這裏有一個例子：

<ul data-role="listview" data-filter="true" id="outer-ul"> 
     <li> 
      <div data-role="collapsible" data-content-theme="c"> 
       <h3>Firs Collapsed list</h3> 
       <ul> 
        <li><a href="index.html">Acura</a></li> 
        <li><a href="index.html">Audi</a></li> 
        <li><a href="index.html">BMW</a></li> 
       </ul> 
      </div> 
     </li> 
    </ul>

這裏是一個演示：http://jsfiddle.net/Awg8W/2/

注意，有一些你必須要處理，用CSS問題。其中之一是有內部data-role="listview"元素創建多個搜索輸入。我躲在所有的，但第一個用這個CSS：

//wait for page to initialize 
$(document).on('pageinit', '#page', function() { 

    //find the headings we want to watch 
    $(this).find('#outer-ul').find('.ui-collapsible-heading').on('click', function() { 

     //cache the parent collapsible widget 
     var that = $(this).closest('.ui-collapsible')[0]; 

     //collapse all other collapsible widgets 
     $(this).closest('ul').find('.ui-collapsible').filter(function() { 

      //filter-out the collapsible widget that got clicked, so it functions 
      return this !== that; 
     }).trigger('collapse'); 

     //since we are messing around with the listview widget, let's refresh it 
     $(this).closest('ul').trigger('refresh'); 
    }); 
});

來源

2012-08-13 20:39:12 Jasper

第一，但是這是不準確我找。這個代碼過濾可摺疊的塊，例如，如果我在搜索框中輸入「ac」，將顯示兩個第一個可摺疊塊，其中包含所有項目，我希望結果將只有2個列表項目，Acura和Cadillac 。有任何想法嗎？ – Victor 2012-08-13 21:13:24

這是純金 – Pitto 2013-06-25 16:32:28

的問題是有點：

#page .ui-listview-filter:nth-child(n+2) { 
    display : none; 
}

更新

然後，您可以使用此jQuery代碼複製手風琴效果舊的，但今天遇到同樣的問題，這裏是我的解決方法演示：http://jsfiddle.net/2Vg4z/。

所以，關於JS，我只是從原始的listview filter複製/粘貼代碼並修改了一下，所以它可以應用於多個列表視圖。

從中搜索字段將被創建的ul具有設置2個屬性：

data-x-filter，像data-filter
id，一個布爾值，能夠識別在搜索字段

其他ul必須通過此搜索字段過濾必須設置1屬性：

data-x-filter-id，該ID設置之前

要使用它，只是複製/代碼從的jsfiddle從this pastebin貼！

在演示中，我添加了一個空列表，使其位於可摺疊組的頂部，但如果列表不爲空，它也會過濾它自己的項目。

我希望它有幫助。

注意：這種解決方案並不完美，但我只是想這個很快。更好的解決方案是創建一個「搜索字段控件」來避免需要空列表，但它需要更多的編碼。

來源

2012-10-17 15:35:19

我知道這個問題有點老，但我面臨同樣的問題。我找到了一個無需編寫JavaScript或CSS的解決方案。我希望這對於有這個問題的其他人來說可能是有用的。 jsfiddle

編輯：一切都歸功於很多An update using nested lists

<div data-role="page" id="page"> 
    <div data-role="content"> 
     <h1>Collapsible set with search</h1> 
     <div data-role="collapsible-set" data-filter="true"> 
      <div data-role="listview" data-inset="true" data-filter="true"> 
       <div data-role="collapsible"> 
        <h1>Numero uno</h1> 
        <div>some text</div> 
       </div> 
       <div data-role="collapsible"> 
        <h1>Number two</h1> 
        <div>some text</div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

來源

2013-05-16 20:08:29 Thijs

如何使用jQuery Mobile過濾可摺疊設置？

回答

相關問題