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

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

怎么样快速搜索插件？