使用jQuery键入时过滤列表

前端之家收集整理的这篇文章主要介绍了使用jQuery键入时过滤列表前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我打算使用一个简单的数据库查询创建一个无序的用户列表,然后计划让人们通过在他们的文本输入中输入他们想要的名字来过滤这个列表。

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

有人知道一个好办法吗?

解决方法

假设你的ul有一个id列表,下面是一种方法
<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();

猜你在找的jQuery相关文章