使用jQuery键入时筛选列表

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

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

---

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

假设您的

ul

具有

id

的

list

，以下是一种方法

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

---

我迭代了所有的元素，隐藏了不匹配的元素，并显示了匹配的元素

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

您可以使用John Resig从php移植到jQuery的

注意：它依赖于方法，该方法已由和移植到JavaScript

用法示例：

$("#text_box_selector").liveUpdate("#list_selector");

注意：

#list_选择器

必须找到包含

li

元素的元素

插件+排序+现场演示

//https://github.com/joshaven/string_score
String.prototype.score=函数（单词，模糊性）{
"严格使用",；
//如果字符串等于单词，则表示完全匹配。
如果（this==word）{return 1；}
//如果不是完美匹配且为空，则返回0
if（word==“”）{返回0；}
var runningScore=0，
查尔斯科，
最终核心，
字符串=这个，
lString=string.toLowerCase（），
strLength=string.length，
lWord=word.toLowerCase（），
wordLength=word.length，
idxOf，
startAt=0，
fuzzies=1，
模糊因素，
我
//提高速度的缓存模糊因子
如果（模糊性）{fuzzyFactor=1-模糊性；}
//浏览单词并把分数加起来。
//发生代码复制以防止检查for循环内部的模糊性
if（模糊性）{
对于（i=0；i0）{
得分。推（[得分，i]）；
}
});
jQuery.each（scores.sort）（函数（a，b）{
返回b[0]-a[0]；
})，函数（）{
jQuery（行[this[1]]）.show（）；
});
}
}
};
$（“#搜索”）.liveUpdate（“#颜色”）




猫书
狗笼
小熊
车门
另一种选择
另一种动物
如果输入文本为空，Nikolas给出的解决方案与Marek给出的解决方案相结合会产生错误
下面的解决方案纠正了这一点，适用于由“a”标记包围的列表。


该函数还设计用于过滤首字母大写的单词元素（例如名称）。因此，过滤是有序的。如果您键入“An”或“An”，那么您将获得列表中以这些字母开头的所有元素（例如，Anthony将匹配，但Fanny否）

下面是与脚本一起使用的示例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>














从中汲取主要灵感，我开发了一种可能的替代方案，并进行了测试

在链接的示例中，可以看到3个不同的选项：


仅过滤UL项目
过滤任何项目
过滤任何带有css动画效果的项目

最简单的JS代码如下所示，它通过
$（“#anyItemList*”）
选择器简单地过滤任何类型的元素：

  $("#anyItemListInputFilter").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#anyItemList *").filter(function() {
        let item = $(this).text().toLowerCase().indexOf(value) > -1;
      $(this).toggle(item);
    });
  });

如果需要的话
<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>

// Just a shorter version
$('ul>li').hide().has(':contains(' + needle + ')').show();

// case insensitive searching with animation
$("ul>li").slideUp().filter( function() {
     return $(this).text().toLowerCase().indexOf(needle) > -1
}).stop(true).fadeIn();

  $("#anyItemListInputFilter").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#anyItemList *").filter(function() {
        let item = $(this).text().toLowerCase().indexOf(value) > -1;
      $(this).toggle(item);
    });
  });

#anyItemAnimatedList * {
  transition:all 0.5s ease;
  opacity:1;
  max-height:500px;
 overflow-y:hidden;
}

#anyItemAnimatedList ul {
  list-style-position:inside;
}

#anyItemAnimatedList .hidden {
  max-height:0;
  opacity:0;
  border:0;
}