自定义列表视图-根据用户输入进行过滤

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>