自定義列表視圖-根據用戶輸入進行過濾

Question

好的，這是我的問題：

• 我正在嘗試使用很多商品來實現基於jQueryMobile的列表視圖（當我說“很多”時，我的意思是成千上萬）
• 元素不必從一開始就出現在列表內，而是根據用戶鍵入的內容進行顯示
• 例如，等待用戶輸入至少2個字符，然后顯示（附加到列表中）適當的項目
• 等等...

你會怎么做？ 是否有解決此問題的現有方法？ （我到處搜索過，但找不到任何有效的方法...）

Answer 1

如果您要為列表視圖使用過濾器，則應檢查源代碼。

else {
//filtervalue is empty => show all
listItems.toggleClass( "ui-screen-hidden", !!listview.options.filterReveal );
}

如果搜索區域為空白，則此處顯示所有元素。 您可以更改它以隱藏全部，而不是全部顯示。 這樣，您可以使列表視圖完整，並且默認行為將顯示所需的結果。 盡管這從第一種類型開始起作用。 您也可以更改它，並在每次調用搜索文本（onKeyUp事件）時檢查其長度是否為lengthOfText> = 2。

編輯列表加載后，您將不得不自己隱藏它們。 只需添加

"ui-screen-hidden"

你的李元素。

//無論您最后要做什么，請提供一個鏈接，以便查看性能。 我真的很好奇

Answer 2

您可以使用

data-filter-reveal="true"

這是演示http://jsfiddle.net/yeyene/SjbMd/2/

HTML

<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search fruits..." data-inset="true">
    <li><a href="#">Apple</a></li>
    <li><a href="#">Banana</a></li>
    <li><a href="#">Cherry</a></li>
    <li><a href="#">Cranberry</a></li>
    <li><a href="#">Grape</a></li>
    <li><a href="#">Orange</a></li>
</ul>