使用 javascript 键入时缩小项目列表

Posted 2023-05-09

【中文标题】使用 javascript 键入时缩小项目列表

【英文标题】：Narrow a list of items as you type with javascript

【发布时间】：2010-10-02 13:33:57

【问题描述】：

我正在尝试寻找一个插件或一种可靠的方法来缩小用户类型的项目列表。

基本上会有一个始终可见的列表，其中包含供用户滚动浏览的产品名称。底部是一个表格，您可以在其中输入产品名称。当您键入时，列表会缩小。

我一直在尝试找到一种方法来调整像 jQuery UI 的自动完成这样的东西以这种方式工作，但是遇到了一些麻烦。

之前有人创造过类似的东西或有任何想法吗？

【参考方案1】：

下面是一个可行的方法的简单示例：

html：

<ul id="products">
    <li>Apple</li>
    <li>Banana</li>
    <li>Mango</li>
</ul>
<input id="filter" />

jQuery:

var $products = $('#products li');
$('#filter').keyup(function() 
    var re = new RegExp($(this).val(), "i"); // "i" means it's case-insensitive
    $products.show().filter(function() 
        return !re.test($(this).text());
    ).hide();
);

这是一种简单的方法，可能需要进行一些调整，但它接近您的需要。

【讨论】：

我通常更喜欢re.test( $(this).text() )，因为它返回一个简单的布尔值

谢谢，这给了我一些可以跳的东西

这是一个很好的观点，Már。我将答案改为使用 re.test。

上面的代码有一个小而重要的错误。 javascript 的第一行应为： var $products = $('#products li'); - 过滤器内没有 li $(this).text() 是一个所有 li 元素连接在一起的字符串。

谢谢，保罗。这就是我在不测试的情况下编写代码所得到的。 :)

【参考方案2】：

quickSearch 插件怎么样？

【讨论】：

这是一个很棒的静态列表插件。

这个任务太棒了。把我认为需要很长时间的事情变成了 10 分钟的考验。谢谢！