按項目和分隔線篩選列表視圖

在jQueryMobile中，我寫了一個data-role="listview"組件，我想篩選包括其分隔符的數據。也就是說，當用戶輸入一些要搜索的文本時，它可能對應於特定的項目或分隔符。在最後一種情況下，必須顯示整個分頻器及其子項。問題是默認的過濾機制省略了分頻器，我不知道如何正確地重新定義filterCallback函數。按項目和分隔線篩選列表視圖

有誰知道如何做到這一點？

我正在嘗試的代碼是here。

在此先感謝。

來源

2012-01-13 Pablo

你的例子適用於我，按'b'和'aaaa'分隔符被刪除 – 2012-01-13 13:11:48

這是因爲第二個分隔符包含一個包含字母'b'的元素，但不是因爲分隔符文本包含那封信。嘗試搜索'bbbb'。我希望在這種情況下分頻器會出現。 – Pablo 2012-01-13 13:37:39

我可以問你爲什麼需要這個嗎？分頻器是用來組不顯示結果恕我直言 – 2012-01-13 14:10:59

嗯，我有話：

http://jsfiddle.net/DCkDp/24/

$("#myList").listview('option', 'filterCallback', function (text, searchValue) { 
    $("li[data-groupoptions]").removeClass('override-ui-screen-hidden'); 
    $("li[data-groupoptions="+searchValue.toLowerCase()+"]").addClass('override-ui-screen-hidden'); 
    return text.toLowerCase().indexOf(searchValue) === -1; 
});

CSS

.override-ui-screen-hidden { 
    display:block !important; 
}

HTML

<div data-role="page"> 
    <div data-role="content"> 
     <ul id="myList" data-role="listview" data-filter="true"> 
      <li data-role="list-divider" data-groupoptions="aaaa">AAAA</li> 
      <li data-groupoptions="aaaa"><a href="index.html">Adam Kinkaid</a></li> 
      <li data-groupoptions="aaaa"><a href="index.html">Alex Wickerham</a></li> 
      <li data-groupoptions="aaaa"><a href="index.html">Avery Johnson</a></li> 
      <li data-role="list-divider" data-groupoptions="bbbb">BBBB</li> 
      <li data-groupoptions="bbbb"><a href="index.html">Bob Cabot</a></li> 
      <li data-role="list-divider" data-groupoptions="cccc">CCCC</li> 
      <li data-groupoptions="cccc"><a href="index.html">Caleb Booth</a></li> 
      <li data-groupoptions="cccc"><a href="index.html">Christopher Adams</a></li> 
      <li data-groupoptions="cccc"><a href="index.html">Culver James</a></li> 
     </ul> 
    </div> 
</div>

來源

2012-01-16 18:54:01

非常感謝！我只作了小的變化和代替選擇器'$（「利[數據groupoptions =」 + searchValue.toLowerCase（）+ 「]」）'我用'$（「利[數據groupoptions * =」 + searchValue。 toLowerCase（）+「]」）'，因此當搜索其名稱的一部分時，特定的組也會出現。這裏更新：http://jsfiddle.net/DCkDp/25/ – Pablo 2012-01-17 07:16:22

更好的+1爲一個不錯的開箱問題。起初我並不理解實際應用，但現在我真的很喜歡它 – 2012-01-17 13:48:46

我看到的唯一問題，它不是通用的，所以它不會與KnockoutJS開箱即可玩 – Adaptabi 2012-10-22 10:43:30

對於包括結果匹配分隔文本，我把一個隱藏p至極包含分隔的文本每行。

<li> 
    <a> 
     <p>Item</p> 
     <p style='display:none;'><?php echo $my_divider; ?></p> 
    </a> 
</li>

來源

2012-05-18 14:33:00 Tikal

這是一種膨脹 – Adaptabi 2012-10-22 10:42:48

有點起色了菲爾Pafford答案匹配不完全分隔的名字：這個

$("li[data-groupoptions="+searchValue.toLowerCase()+"]").addClass('override-ui-screen-hidden');

：改變這種

$("li[data-groupoptions*="+searchValue.toLowerCase()+"]").addClass('override-ui-screen-hidden');

現在你可以匹配 'AAAA' 只是鍵入「 AA」。這裏試試吧：http://jsfiddle.net/qjJw3/

來源

2013-03-05 03:42:34

按項目和分隔線篩選列表視圖

回答

相關問題