html jQuery搜索过滤，客户端脚本。您需要向包装元素添加一个数据容器，该数据容器将隐藏在不正确的m上

Posted 2021-05-10

$('.your-search-box').keyup(function(event) {
  var query = $(this).val().toLowerCase();
  var filter = $('[data-filter]');
  var container = $('[data-container]');

  if ($(this).val().length <= 1) {
    $(filter).each(function() {
      var item = $(this).text().slice(0, 1).toLowerCase();

      if (item != query) {
        $(this).closest(container).hide();
      } else {
        $(this).closest(container).show();
      }
    });
  } else {
    $(filter).show();
    $(filter).each(function() {
      var item = $(this).text().toLowerCase();

      if (item.indexOf(query) == -1) {
        $(this).closest(container).hide();
      } else {
        $(this).closest(container).show();
      }
    });
  }

  if ($(this).val().length === 0) {
    $(filter).show();
    $(container).show();
  }
});

<input type="search" class="your-search-box" value="Match" />

<div data-container>
  <a href="#" data-filter>Match this Text</a>
</div>

<div data-container>
  <a href="#" data-filter>Not any of this</a>
</div>