基于用户输入从列表中清除项目

clearing items from a list based on user input

本文关键字：列表 清除 项目 输入 于用户 用户      更新时间：2023-09-26

正在寻找一个jquery方法，通过用户输入缩小无序列表的范围。列表中的每个项目都包含一个名字和姓氏。目的是使用两者来缩小列表范围，因此如果第一个字母是"x"，则名字或姓氏中没有"x"的所有项目都将被清除。此外，若列表缩小到0，则类似于激发一个函数（ajax调用，但可以是任何东西）。

html:

<input id="listCheck">
    <ul>
    <li class="entry"><span class="nametext">alex crain</span></li>
    <li class="entry"><span class="nametext">Bart Simpson</span></li>
    <li class="entry"><span class="nametext">Jessica Alba</span></li>
    <li class="entry"><span class="nametext">Will Farrell</span></li>
    </ul>

js:

$("listCheck").keyup(function(){
    var term = $(this).val();    
});

我假设我需要将跨度转换为一个名字和姓氏分开的数组，然后循环遍历它们。Fiddle

像这个

$('#listSearch').keyup(function(){
   var valThis = $(this).val().toLowerCase();
    $('.navList>li').each(function(){
     var text = $(this).text().toLowerCase();
        (text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();            
   });
});

演示Fiddle

//您可以使用if-else来代替三元运算符。

与其使用indexOf，不如使用:contains()选择器。它不会更快，但代码看起来会更干净：

$("li:contains(term)").show();
$("li:not(:contains(term))").hide();

等等。这是你的小提琴的演示

试试这个：

$("#listCheck").keyup(function(){
var txt = $(this).val();
      $('.nametext').each(function () 
        {
            if($(this).html().indexOf(txt) >= 0)
            {
                   $(this).parent().show();
            }
            else
            {
                $(this).parent().hide();
                //$(this).parent().remove();
            }
        });
});

这是工作示例here

相关文章：