jquery - 输入文本被一一删除时如何显示匹配结果

Question

我可以通过在过滤字段中输入字母来显示匹配结果，但是当按下“退格”(逐个删除字母)时，我可以使相同的匹配结果显示出来。例如，如果我在下面的示例中输入“K”、“U”、“S”，则会显示 K 和 B 行，但是如果我将“S”、“U”一一删除，那么结果应该任何带有“K”字母的单词，在我的代码中都没有。

另外，在显示无匹配结果消息后，如果我将字母一一删除，结果将显示空白而不是匹配结果。

$(function($) {
  var list = { letters:[] };
  var $ul = $("<ul></ul>").appendTo(".page-content");
   $(".page-content").append("<p id='no_result_found'></p>");
   
  $("nav.link-list a").each(function(itmLetter) {
    var brandTitle = $(this).attr("title");
    itmLetter = brandTitle.trim().substring(0, 1).toUpperCase();
    if (list.letters.indexOf(itmLetter) < 0) {
       list[itmLetter] = [];
        list.letters.push(itmLetter);
      $ul.append(
        $("<li/>", {
          "class": "AddContent",
          "id": itmLetter,
          "data-content": itmLetter
        })
      ); // end of $ul.append()
    } // end of if statement

     // push letters to each nav-list
       list[itmLetter].push($(this));

  }); // end of alphabet list

    list.letters.sort();
    $("article.category-list").empty();
    $.each(list.letters, function(i, letter){
        list[letter].sort(function(a, b) {
            return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
        }); // end of letters.sort()

         var ul = $("<ul/>");
         $.each(list[letter], function(idx, itm){
              ul.append(itm);
          }); // end of .each()
    
         $("article.category-list").append($("<nav/>").addClass("link-list").append($("<h3/>").addClass("alphabet").html(letter)).append(ul));
}); // end of .each()

$("li.AddContent").click(function() {
       var al = $(this).attr("id");
      $("nav.link-list").each(function(){
          var brand =  $(this).find("a").attr("title");
           $(this).css("display", "none").filter(function(){
           return brand.trim().substring(0, 1).toUpperCase() == al;
      }).prependTo("article.category-list").fadeIn(500);
   }); //end of each()
 }); //end of click()

// filter field
   $("input#searchTerm").on("keyup", function(){
         var inputValue = $(this).val().toLowerCase();
         var checkEmpty = [];
          
         $("nav.link-list ul").children("a").each(function(){
             var brand =  $(this).attr("title");

                 if (brand.toLowerCase().indexOf(inputValue) > -1) {
                       checkEmpty.push('1');
                       $(this).fadeIn(800)
                } else {
                      $(this).css("display", "none");
                }
          
     }); // end of .each()
      if ($("nav.link-list ul").children("a").is("visible")) {$("nav.link-list ul").parent().addClass("active");}
if(checkEmpty.length == 0)
        {
         $('#no_result_found').html('Sorry, no matched result is found, please try again.');
        }
        else
        {
          $('#no_result_found').html('');
        }
        $('.link-list').each(function(){
          var item=$(this);
          if(item.find('a').get().length==item.find('a:hidden').get().length) {
          item.hide();
          }
          else {
          item.show();
          }
        });
        if(inputValue.length==0){
        $('.link-list').show();
        }
        
        

  }); // end of .on(keyup)
    
    // no result
   
}); //end of script

.AddContent:before {
   content: attr(data-content);
}

.page-content h1 {
    display: inline;
    float: left;
}

/**** search field ****/
.page-content__body {
    display: block;
    float: right;
    position: relative;
    top: 24px;
    width: 20%;
}
.search {
  width: 100%;
  position: relative
}
.searchTerm {
  float: left;
  padding: 5px;
  outline: none;
  color: #9DBFAF;
  height: 28px !important;
  border: none !important;
  border-bottom: 1px solid #eaeaea !important;
  padding: 0 4px !important;
}

.searchTerm:focus{
  color: #00B4CC;
}

.searchButton {
  position: absolute;  
  right: 0;
  width: 20px;
  height: 20px;
  border: transparent;
  background: transparent;
  text-align: center;
  color: #8e8e8e;
  cursor: pointer;
  font-size: 16px;
 margin-top: 4px !important;
}

/*Resize the wrap to see the search bar change!*/
.brand-search-wrap{
  width: 100%;
}

/**** Alpabet list ****/
.page-content ul {
   list-style-type: none;
    padding: 0 12px;
    width: 100%;
    display: flex;
    border-bottom: 1px solid #eaeaea;
    align-items: center;
    flex-basis: 100%;
    text-align: center;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
.page-content ul li {
   cursor: pointer;
   text-align: center;
   display: flex;
   flex-grow: 1;
   padding: 12px 4px;
   transition: 0.4s;
  }
.AddContent:before {
   content: attr(data-content);
   display: block;
   font-size: 20px;
   margin: auto;
   transition: 0.4s;
  }
 .page-content ul li:hover,
 .page-content ul li:focus { 
         background-color: #444;
   }
   .AddContent:hover:before,
   .AddContent:focus:before   
 {
         color: #fff;
   }   

/*** link-list box ****/
.link-list.box {
    padding: 0 0 2px 2px;
 }
.link-list__header {
    text-align: left;
    padding: 0;
    font-size: 1.25rem;
    position: relative;
    top: 8px;
    left: 52px;
    padding: 0;
    min-height: 0 !important;
    line-height: 1;
}
.link-list__background {
    padding-top: 0;
    height: 56px;
    padding: 8px 0 0 16px;
}
.link-list__image {
     width: 12% !important;
     padding: 0;
     position: relative;
     bottom: 24px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Brands</h1>
<div class="brand-search-wrap">
   <div class="search">
      <input type="text" class="searchTerm" id="searchTerm" placeholder="Enter the brand name here">
      <button type="submit" class="searchButton">
        <i class="fa fa-search"></i>
      </button>
   </div>
</div>
  <div class="page-content"></div>
<article class="category-list">
    <nav class="link-list">
      <a href="/brands/abus" title="ABUS">ABUS</a>
    </nav>
    <nav class="link-list">
      <a href="/brands/abus" title="ACC">ACC</a>
    </nav>
    <nav class="link-list">
      <a href="/brands/abus" title="BUS">BUS</a>
    </nav>
    <nav class="link-list">
      <a href="/brands/abus" title="BKUS">BKUS</a>
    </nav>
    <nav class="link-list">
      <a href="/brands/abus" title="KUS">KUS</a>
    </nav>
    <nav class="link-list">
      <a href="/brands/abus" title="SUK">SUK</a>
    </nav>
    <nav class="link-list">
      <a href="/brands/abus" title="YUG">YUG</a>
    </nav>
  </article>

Answer 1

你的问题的核心是':hidden' selector如何在 jQuery 中工作。

这是您的概念失败的代码行:

if(item.find('a').get().length==item.find('a:hidden').get().length) {

在他看来，<a>有问题的元素本身可能是可见的(正确过滤会从中删除display:none)，但它们的父元素nav.link-list项目当前可能被隐藏，因此元素本身仍然与 :hidden 匹配。选择器:

Elements can be considered hidden for several reasons: ...
* An ancestor element is hidden, so the element is not shown on the page.

所以你需要找到另一种标记隐藏元素的方法，比如用一些css类来标记它们。

如果您需要进一步帮助，请在此处回复。

更新

以下是代码的相关部分，已更新以反射(reflect)我提议的更改，替换 :hidden通过一些自定义类选择器:

首先，切换一个类 hidden除了显示/隐藏 <a>元素(注意 addClass/removeClass 语句):

        if (brand.toLowerCase().indexOf(inputValue) > -1) {
            checkEmpty.push('1');
            $(this).fadeIn(800).removeClass('hidden');
        } else {
            $(this).css("display", "none").addClass('hidden');
        }

然后，检查此类，而不是使用 :hidden选择器(将 :hidden 替换为 .hidden ):

if(item.find('a').get().length==item.find('a.hidden').get().length) {

就这么简单。