如果搜索的文本不存在，如何隐藏 div

Question

我可以过滤掉数据，现在如果搜索的文本不存在，我会尝试隐藏 div。有什么办法吗

<input type="text" placeholder="Search" class=".bar-input">
    <div class="xyz"> hide me if searched value doesn't match</div>
    <ul class=".myUL">
      <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';
          }
      }
    });

Answer 1

在这里，如果这对你有用，请接受。

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


<input type="text" placeholder="Search" class="bar-input">

<div class="xyz"> hide me if searched value doesn't match</div>
    <ul class="myUL">
      <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>

如果搜索的文本不存在，如何隐藏 div

How to hide a div if searched text not exist

html

javascript

jquery

jquery-ui