Question

我创建了一个过滤器搜索字段，以过滤出品牌页面上的品牌名称。现在，我被困在所有元素均不显示时如何显示“无结果消息”。并且当输入字段中输入的字母被一一删除时，如果有匹配的字母将显示结果（如果仍然没有匹配的结果将不显示结果消息），直到输入值为空（为空？），然后再次显示整个品牌列表。

// filter field
   $("input#searchTerm").on("keyup", function(){
         var inputValue = $(this).val().toLowerCase();
         if(inputValue)
         $("nav.link-list").each(function(){
              var brand =  $(this).children("a").attr("title");
              $(this).filter(function(){
                 if (brand.toLowerCase().indexOf(inputValue) > -1) {
                     $(this).fadeIn(800);
                } else {
                     $(this).fadeOut(300);
                   
                }
               if($("nav.link-list:visible").length === 0) {
                  $(".page-content").append("<p>Sorry, no matched result is found, please try again.</p>");
               }
         }); // end of .filter()
          
     }); // end of .each()

  }); // end of .on(keyup)

.page-content__body {
    display: block;
    float: left;
    position: relative;
    top: 0;
    width: 100%;
    margin-bottom:20px;
}
.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%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-content">
  <h1>Brands</h1>
  <div class="page-content__body">
  
  <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>
</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>
  </article>

Answer 1

我认为在淡入/淡出成功后，您需要处理该问题

    // filter field
   $("input#searchTerm").on("keyup", function(){
         var inputValue = $(this).val().toLowerCase();
         if(inputValue)
         $("nav.link-list").each(function(){
              var brand =  $(this).children("a").attr("title");
              $(this).filter(function(){
                 if (brand.toLowerCase().indexOf(inputValue) > -1) {
                     $(this).fadeIn(800);
                } else {
                     $(this).fadeOut(300,function(){
    if($("nav.link-list:visible").length === 0) {
                  $(".page-content").append("<p>Sorry, no matched result is found, please try again.</p>");
               }
    });

                }

         }); // end of .filter()

     }); // end of .each()

  }); // end of .on(keyup)

Answer 2

   <div class="page-content">
    <h1>Brands</h1>
    <div class="page-content__body">

   <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>
   </div>
    <article class="category-list">


    <p id="no_result_found"></p>


      <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>
      </article>


 // filter field
    $("input#searchTerm").on("keyup", function(){
      var inputValue = $(this).val().toLowerCase();
      var checkEmpty = [];

        $(".category-list nav").each(function(){
            var brand =  $(this).find("a").attr("title").toLowerCase();
            if(brand.indexOf(inputValue) > -1) 
            {
              checkEmpty.push('1');
              $(this).fadeIn(800);
            } 
            else 
            {
              $(this).fadeOut(300);   
            }
        }); // end of .each()

        if(checkEmpty.length == 0)
        {
          $('#no_result_found').html('No result found');
        }
        else
        {
          $('#no_result_found').html('');
        }
    }); // end of .on(keyup

如何处理过滤器搜索jQuery中的无结果消息

2 个答案: