How to hide a div if searched text not exist-CodePudding

I am able to filter out data, now I am trying to hide a div if searched text doesn't exist. Is there any way to do it.

<input type="text" placeholder="Search" >
    <div > hide me if searched value doesn't match</div>
    <ul >
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
      <li>five</li>
      <li>six</li>
    </ul>
    
    $('.bar-input').on('keyup', function() {
      var input_val = $('.bar-input').val();
      var tags = $('.myUL > li');
      var count = tags.length;
      for (i = 0; i < count; i  ) {
          if (!input_val || tags[i].textContent.toLowerCase().indexOf(input_val) > -1) {
              tags[i].style['display'] = 'block';
             
          } else {
              tags[i].style['display'] = 'none';
          }
      }
    });

CodePudding user response：

Here, accept if this work for you.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type="text" placeholder="Search" >

<div > hide me if searched value doesn't match</div>
    <ul >
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
      <li>five</li>
      <li>six</li>
    </ul>
    
    <script>
    
    $('.bar-input').on('keyup', function() {
      var input_val = $('.bar-input').val();
      var tags = $('.myUL > li');
      var count = tags.length;
      var match_cnt = 0;
      for (i = 0; i < count; i  ) {
          if (!input_val || tags[i].textContent.toLowerCase().indexOf(input_val) > -1) {
              tags[i].style['display'] = 'block';
              
              match_cnt  ;
             
          } else {
              tags[i].style['display'] = 'none';
          }
      }
      if(match_cnt<1) {
        $('.xyz').hide();
      } else {
        $('.xyz').show();
      }
    }); 
    
    </script>