Javascript 根据输入中输入的名字和/或姓氏从ul中删除li

我想通过删除不匹配的列表项，在用户通过名字或姓氏搜索他们想要的人时，集中一个长的

ul

在输入字段中有空格之前，我的当前代码工作正常
目标是让用户能够以任意顺序输入姓名和姓氏，并清除不相关的项目
现在的问题是，只要名字和姓氏之间有空格，所有项目都会被清除

html

---

拉小提琴这有点棘手。由于

空间

被取出，因此它从未匹配过

$('#listCheck').keyup(function(){
    var valThis = $(this).val().toLowerCase();

    $('.mylist>li').each(function(){
      var text = $(this).text().toLowerCase().split(' ');
      var text1 = text[0];
      var text2 = text[1];
      var text3 = text1 + ' ' + text2;  
      ((text2.indexOf(valThis) == 0)) || (text3.indexOf(valThis) == 0)? $(this).show() : $(this).hide();            

    });

});

---

这有点棘手。由于

空间

被取出，因此它从未匹配过

$('#listCheck').keyup(function(){
    var valThis = $(this).val().toLowerCase();

    $('.mylist>li').each(function(){
      var text = $(this).text().toLowerCase().split(' ');
      var text1 = text[0];
      var text2 = text[1];
      var text3 = text1 + ' ' + text2;  
      ((text2.indexOf(valThis) == 0)) || (text3.indexOf(valThis) == 0)? $(this).show() : $(this).hide();            

    });

});

---

.

我想这里还缺少一个条件：

---

我想这里还缺少一个条件：

---

您可以像使用

toLowerCase

一样规范化输入和列表，以便在比较之前删除空白。我还将其更改为使用正则表达式

在您的例子中，正则表达式主要是为了简化比较（无需同时使用拆分和多次比较）

如果您愿意，您可以很容易地修改它来进行“模糊”搜索

$('#listCheck').keyup(function(){
   var valThis = $(this).val().toLowerCase();

    $('.mylist>li').each(function(){
        var $this   = $(this);
        var reMatch = new RegExp(valThis.replace(/\s/,''), 'i');
        var text    = $this.text().replace(/\s/, '');

        reMatch.test(text) ? $this.show() : $this.hide();            
   });
});

---

您可以像使用

toLowerCase

一样规范化输入和列表，以便在比较之前删除空白。我还将其更改为使用正则表达式

在您的例子中，正则表达式主要是为了简化比较（无需同时使用拆分和多次比较）

如果您愿意，您可以很容易地修改它来进行“模糊”搜索

$('#listCheck').keyup(function(){
   var valThis = $(this).val().toLowerCase();

    $('.mylist>li').each(function(){
        var $this   = $(this);
        var reMatch = new RegExp(valThis.replace(/\s/,''), 'i');
        var text    = $this.text().replace(/\s/, '');

        reMatch.test(text) ? $this.show() : $this.hide();            
   });
});

---

我不认为您的

文本

变量指的是您认为它的功能。你试过调试吗？我已经试过了。将

+'

添加到

text1

：。@j08691抱歉，我没有那么丰富的经验。文本变量应该是li中每个跨度元素的内部文本。没有得到任何错误。我没有看到需要调试。也许我遗漏了什么…我不认为你的

文本
变量指的是你认为它的作用。你试过调试吗？我已经试过了。将
+'
添加到
text1
：。@j08691抱歉，我没有那么丰富的经验。文本变量应该是li中每个跨度元素的内部文本。没有得到任何错误。我没有看到需要调试。也许我错过了什么…那是我第一次尝试。检查新小提琴！不客气@Maximhash是唯一一个“以任意顺序但同时以两种顺序”创建的人那是我第一次尝试。检查新小提琴！不客气@Maximhash是唯一一个“以任意顺序但同时以两种顺序”创建的人P
$('#listCheck').keyup(function(){
   var valThis = $(this).val().toLowerCase();

    $('.mylist>li').each(function(){
        var $this   = $(this);
        var reMatch = new RegExp(valThis.replace(/\s/,''), 'i');
        var text    = $this.text().replace(/\s/, '');

        reMatch.test(text) ? $this.show() : $this.hide();            
   });
});