从列表中搜索并在找到搜索结果时删除兄弟姐妹

Question

我正在尝试添加搜索过滤器，以便用户在键入时可以从此合同列表中找到结果。例如：如果用户键入＆＃34; IP＆＃34;，则应显示前4个结果。以下是功能：

$('#doc_search').on('keyup', function(){

    var inputtext = $(this).val().toLowerCase();

    $('.subdoclist li a').each(function() {
         if(inputtext ==''){
            $('.subdoclist li').each(function(){
                $(this).addClass('show');
            });
             console.log(inputtext);
         } else if ($(this).text().toLowerCase() === inputtext) {

            $('.subdoclist li').removeClass('show');
             $(this).parent().addClass('show');
             console.log(inputtext);
         } 

    });
})

• ＆＃39;＃doc_search＆＃39;是顶部的搜索字段
• ＆＃39; .subdoclist li＆＃39;是包含带有文本的锚标记的列表项

目前，我必须输入确切的文字，然后才能进行搜索。

小提琴链接：Click here

Answer 1

如果您想进行简单搜索，可以检查输入的文本是否包含在字符串中，如下所示： How to check whether a string contains a substring in JavaScript?

您可以检查在搜索中输入的每个单词，使用空格分隔符分割字符串并使用循环，但如果有太多单词或很多条目，则需要花费更多精力。

Answer 2

这里有几个问题已修复，首先我使用的是indexOf＆gt; -1来查看输入字符串是否包含在每个潜在匹配中，而不是在每次匹配时删除所有匹配的show我在执行搜索之前执行此操作。

$('#doc_search').on('keyup', function() {
  var inputtext = $(this).val().toLowerCase();
  if (inputtext != '') {
    $('.subdoclist li').removeClass('show');
    $('.subdoclist li a').each(function() {
        if ($(this).text().toLowerCase().indexOf(inputtext) > -1) {
        $(this).parent().addClass('show');
     }
        });
   } else {
     $('.subdoclist li').addClass('show');
   }
});

Answer 3

简短且区分大小写的变体：

$('#doc_search').on('keyup', function() {
  var inputtext = $(this).val();
  if (inputtext !== '') {
      $('.subdoclist li').each(function() {
         $(this).toggle($("a:contains('"+ inputtext +"')",$(this)).length > 0);
      });
   } else {
     $('.subdoclist li').show();
   }
});