javascript - 自定义列表视图 - 过滤用户输入

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"

到你的 li 元素。

//不管你最后做了什么，请提供一个链接，以便我看到性能。我真的很好奇。

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>