Как манипулировать сообщением об отсутствии результата в фильтре поиска jquery

Я создал поле поиска с фильтром, чтобы отфильтровать названия брендов на странице бренда. Теперь я застрял в том, как показать сообщение «Нет результата», когда все элементы ничего не отображают. И когда введенные буквы в поле ввода удаляются одна за другой, результат будет отображаться, если есть совпадающая буква (сообщение о результате все равно не будет отображаться, если совпадающий результат все еще отсутствует), пока входное значение не станет пустым. (null?), затем снова появляется весь список брендов.

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


javascript filter jquery
person Sharon Hu Bach    schedule 19.10.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, что после успешного постепенного появления/исчезновения вам нужно справиться с этим

    // 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)
person Hiren Raiyani    schedule 19.10.2018
comment
Возникла проблема, когда я удаляю букву во вводе: сообщение об отсутствии результата появляется, даже если ниже показан совпадающий результат. - person Sharon Hu Bach; 19.10.2018