如何使用輸入過濾器在 Div 上進行實時搜索
[英]How to make live search on an Div with input filter
問題描述
我在使用實時搜索腳本時遇到了一些問題。
我想在我的搜索輸入中鍵入一些內容以隱藏搜索輸入中不包含此文本的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();
});
2 個解決方案
解決方案1
2 已采納 2021-01-17 15:43:30
您需要搜索容器的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>
解決方案2
1 2021-01-17 16:05:50
我自己可以使用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 上進行實時搜索
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.