【问题标题】：Custom listview - filtering on user input自定义列表视图 - 过滤用户输入
【发布时间】：2013-06-09 18:43:54
【问题描述】：

好的，这是我的问题：

我正在尝试实现一个基于 jQueryMobile 的列表视图，其中包含大量项目（当我说“很多”时，我的意思是数以万计）
元素不必从一开始就出现在列表中，而是根据用户键入的内容显示
例如等待用户输入至少 2 个字符，然后仅显示（附加到列表）适当的项目
等等……

你会怎么做呢？这个问题是否有任何现有的解决方法？（我到处搜索，但找不到任何工作......）

【问题讨论】：

您是否尝试过阻止对第一个 .keypress 的任何操作并在第二个事件上执行您的代码？

标签： javascript jquery html listview jquery-mobile

【解决方案1】：

如果您对列表视图使用过滤器，则应检查源代码。

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

如果搜索区域为空白，则此处显示所有元素。您可以将其更改为全部隐藏，而不是全部显示。这样你就可以让你的列表视图满了，默认行为将负责显示你想要的结果。虽然这从第一种类型开始起作用。您也可以更改它，并在每次调用时检查搜索文本的长度（onKeyUp 事件），如果它是 lengthOfText >= 2 。

编辑当列表加载时，您必须自己隐藏它们。只需添加

"ui-screen-hidden"

到你的 li 元素。

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

【讨论】：

【解决方案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>

【讨论】：

+1 我不知道这个。他们不断添加新功能！