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

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