使用jQuery输入时过滤列表

小编典典

使用jQuery输入时过滤列表

ajax

我打算使用一个简单的数据库查询来创建Web应用程序的用户的无序列表，但是后来打算让人们通过在文本输入中键入要查找的人的名字来过滤此列表。

我希望使用jQuery将输入框中的字符串与列表项中的任何一个匹配，然后隐藏其他项，也许是通过对包含匹配字符串的那些项动态地应用一个新类，并隐藏所有其他不包含该类。

有人知道这样做的好方法吗？

阅读 269

2020-07-26

共1个答案

小编典典

假设你ul有一个id的theList，下面会做的一种方式。

<input type="text" onkeyup="filter(this)" />

<script language="javascript" type="text/javascript">
    function filter(element) {
        var value = $(element).val();

        $("#theList > li").each(function() {
            if ($(this).text().search(value) > -1) {
                $(this).show();
            }
            else {
                $(this).hide();
            }
        });
    }
</script>

另外，对于基于Marek Tihkan发布的内容的更简洁的版本，您可以将以下内容替换each（）循环。不知道这会更好还是更坏。

$('#theList > li:not(:contains(' + value + '))').hide(); 
$('#theList > li:contains(' + value + ')').show();

2020-07-26