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

Question

I have some troubles with a live search script.我在使用实时搜索脚本时遇到了一些问题。

I want to make it when i type some in my search input to hide div that not contains this text in search input.我想在我的搜索输入中键入一些内容以隐藏搜索输入中不包含此文本的div 。 My code so far.到目前为止我的代码。

<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: 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();

});

Answer 1

You need to search through the children() of the container and use filter() instead of not()您需要搜索容器的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>

Answer 2

On my own I can offer a solution using the each() method.我自己可以使用each()方法提供解决方案。

 $("#box").on('keyup', function(){ let value = $(this).val().toLowerCase(); $('#Container div[data-name]').each(function () { if ($(this).text().toLowerCase().indexOf(value) === -1) { $(this).hide(); } else { $(this).show(); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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>

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2021-01-17 15:43:30

解决方案2
1 2021-01-17 16:05:50

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2021-01-17 15:43:30

解决方案2 1 2021-01-17 16:05:50

解决方案1
2 已采纳 2021-01-17 15:43:30

解决方案2
1 2021-01-17 16:05:50