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

Question

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

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

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

有人以前创造过这样的东西或有任何想法吗？

Answer 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();
});

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

Answer 2

快速搜索插件怎么样？