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

我试图找到一个插件或一个坚实的方法来缩小用户类型的项目列表.

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

我一直试图找到一种方法来适应像jQuery UI的自动完成这样的方式,但有一些麻烦.

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

这是一个可行的方法的快速示例:

HTML:

    
Apple
    
Banana
    
Mango

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

这是一个简单的方法,可能需要一些调整.但它接近你所需要的.

怎么样快速搜索插件？