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

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

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

我一直在试图找到一种方法来适应类似jQueryUI的自动完成这样的工作方式，但遇到了一些麻烦

---

有人以前创造过类似的东西或有什么想法吗？

下面是一个可以工作的方法的快速示例：

HTML:

---

这是一个简单的方法，可能需要一些调整，但它已经接近你需要的了。

插件怎么样？

我通常更喜欢

re.test（$（this.text（））

因为它返回一个简单的布尔值谢谢，这给了我一些可以跳下去的东西，这是一个很好的观点，Már。我将答案改为使用re.test。上面的代码有一个很小但很重要的错误。javascript的第一行应该是：var$products=$（“#products li”）；-如果没有li$（this）.text（），则过滤器中是一个字符串，所有li元素都连接在一起。谢谢，Paolo。这就是我在不测试代码的情况下编写代码的结果。：）这是一个很好的静态列表插件，非常适合这个任务。把我认为要花很长时间的事情变成了10分钟的折磨。谢谢

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

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