使用jQuery键入时过滤列表

Question

我计划使用简单的数据库查询创建我的Web应用程序的无序用户列表,但后来计划让人们通过在文本输入中键入他们正在寻找的人名来过滤此列表.

我希望使用jQuery将输入框中的字符串与列表项中的任何一个匹配,然后隐藏其他项,可能是通过动态地将新类应用于包含匹配字符串的类,并隐藏所有其他类不包含该类.

有谁知道这样做的好方法？

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

Answer 2

如果输入文本为空,Nikolas给出的解决方案与Marek的解决方案之间会出现错误.
下面的解决方案纠正了该问题并适用于由"a"标记包围的列表.

该函数还用于过滤元素,其中第一个字母为大写字母(例如带有名称).因此排序过滤.如果您输入'An'或'an',那么您将从这些字母开始获取列表中的所有元素(例如Anthony将匹配但Fanny no).

function filter (element,what) {
    var value = $(element).val();
    value = value.toLowerCase().replace(/\b[a-z]/g, function(letter) {
        return letter.toUpperCase();
    });

    if (value == '') {
        $(what+' > a > li').show();
    }
    else {
        $(what + ' > a > li:not(:contains(' + value + '))').hide();
        $(what + ' > a > li:contains(' + value + ')').show();
    }
};

下面是一个与脚本一起使用的示例HTML代码:

<input type="text" onkeyup="filter(this,'theList')" />
<ul id="theList">
    <li><a href="">Tyrone Schlecht</a></li>
    <li><a href="">Javier Ress</a></li>
    <li><a href="">Carlene Tomes</a></li>
    <li><a href="">Neil Aigner</a></li>
    <li><a href="">Nita Schreffler</a></li>
    <li><a href="">Clinton Knuckles</a></li>
    <li><a href="">Eve Kellett</a></li>
    <li><a href="">Jamie Kaspar</a></li>
    <li><a href="">Emilia Hooton</a></li>
    <li><a href="">Kenya Sidney</a></li>
</ul>

Answer 3

我通过迭代所有这些并隐藏那些不匹配的女巫并显示匹配的那些来做到了.

$('li').hide(); 
$('li:contains(' + needle + ')').show();