Question

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

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

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

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

Answer 1

以下是一个可行的方法的快速示例：

HTML：

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

JS：

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

quickSearch插件怎么样？

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

2 个答案: