时间戳

首页 > 解决方案 > 如何使用输入过滤器在 Div 上进行实时搜索

javascript - 如何使用输入过滤器在 Div 上进行实时搜索

问题描述

我在使用实时搜索脚本时遇到了一些问题。

我想在我的搜索输入中键入一些内容以隐藏搜索输入中不包含此文本的div 。到目前为止我的代码。

<html>
<head></head>
<body>
<input placeholder="Search Me" id="box" type="text" />
<div id="Container">
<div  data-name="Anni">
Anni
</div>
<div  data-name="Pedro">
Pedro
</div>
<div data-name="Tomi">
Tomi
</div>
</div>
</body>
</html>

JavaScript：

$("#box").on('keyup', function(){
  var matcher = new RegExp($(this).val(), 'gi');
  $('#Container').show().not(function(){
      return matcher.test($(this).find('data-name').text())
  }).hide();

});

标签： javascripthtml

解决方案

您需要搜索children()容器并使用filter()而不是not()

$("#box").on('keyup', function(){
  var matcher = new RegExp($(this).val(), 'gi');
  $('#Container').children().hide().filter(function(){
      return matcher.test($(this).text())
  }).show();

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder="Search Me" id="box" type="text" />
<div id="Container">
  <div data-name="Anni">
    Anni
  </div>
  <div data-name="Pedro">
    Pedro
  </div>
  <div data-name="Tomi">
    Tomi
  </div>
</div>

推荐阅读