javascript 使用在每个 div 中的元素中找到的文本进行搜索过滤
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27096548/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Filter by search using text found in element within each div
提问by point71echo
I found a fiddle that was useful for hiding text based on the text used in a search box, but have not been able to figure out how to adapt this method to a div with multiple elements in it. How could I change the jQuery in the attached fiddle to make it filter the div elements that match the search entered instead of the text found in the list items?
我发现了一个基于搜索框中使用的文本隐藏文本的小提琴，但无法弄清楚如何将此方法应用于包含多个元素的 div。如何更改附加小提琴中的 jQuery 以使其过滤与输入的搜索匹配的 div 元素，而不是在列表项中找到的文本？
http://jsfiddle.net/point71echo/rof67uy6/2/
http://jsfiddle.net/point71echo/rof67uy6/2/
<input placeholder="Search Me" id="box" type="text" />
<ul class="navList">
<li>apples</li>
<li>apricots</li>
<li>acai</li>
<li>blueberry</li>
<li>bananas</li>
<li>cherry</li>
<li>coconut</li>
<li>donut</li>
<li>durean</li>
</ul>
<div class="connect-cat" catname="apples" style="visibility: visible; display: block;">
<a href="/connect/apples">
<div style="padding:5px;cursor:pointer;">
<div>
<img width="60" class="cat-logo" src="http://t2.gstatic.com/images?q=tbn:ANd9GcS0rYdTsHK-IwuWCNA_xXq44v76dFH2wPc5wdErF9yWHty-wqY4Bg" alt="apples">
</div>
<span>apples</span>
</div>
</a>
</div>
<div class="connect-cat" catname="apricots" style="visibility: visible; display: block;">
<a href="/connect/apricots">
<div style="padding:5px;cursor:pointer;">
<div>
<img width="60" class="cat-logo" src="http://t2.gstatic.com/images?q=tbn:ANd9GcS0rYdTsHK-IwuWCNA_xXq44v76dFH2wPc5wdErF9yWHty-wqY4Bg" alt="apricots">
</div>
<span>apricots</span>
</div>
</a>
</div>
Here's the jQuery used:
这是使用的jQuery：
$('#box').keyup(function(){
var valThis = $(this).val().toLowerCase();
if(valThis == ""){
$('.navList > li').show();
} else {
$('.navList > li').each(function(){
var text = $(this).text().toLowerCase();
(text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();
});
};
});
回答by
If I needed to add another text element to each div box, is there a way that all text in each div could be searchable? Here's the fiddle with one additional text element - jsfiddle.net/point71echo/mttgj1tt/1 – point71echo
如果我需要向每个 div 框添加另一个文本元素，是否可以搜索每个 div 中的所有文本？这是带有一个附加文本元素的小提琴 - jsfiddle.net/point71echo/mttgj1tt/1 – point71echo
Here is a solution to search two elements at once in native JavaScript, without any libraries.
这是在原生 JavaScript 中一次搜索两个元素的解决方案，无需任何库。
document.getElementById("box").onkeyup=function(){
var matcher = new RegExp(document.getElementById("box").value, "gi");
for (var i=0;i<document.getElementsByClassName("connect-cat").length;i++) {
if (
matcher.test(document.getElementsByClassName("name")[i].innerHTML) ||
matcher.test(document.getElementsByClassName("category")[i].innerHTML)
) {
document.getElementsByClassName("connect-cat")[i].style.display="inline-block";
} else {
document.getElementsByClassName("connect-cat")[i].style.display="none";
}
}
}
If you want to use jQuery to make it more readable (those stupid long DOM functions):
如果您想使用 jQuery 使其更具可读性（那些愚蠢的长 DOM 函数）：
$("#box").on('keyup', function(){
var matcher = new RegExp($(this).val(), 'gi');
$('.connect-cat').show().not(function(){
return matcher.test($(this).find('.name, .category').text())
}).hide();
});
回答by Jose Rey
This should match only the divs with the class connect-cat, and filter by the span inside.
这应该只匹配具有 connect-cat 类的 div，并按内部的跨度过滤。
$('#box').keyup(function(){
var valThis = $(this).val().toLowerCase();
if(valThis === ""){
$('div.connect-cat').show();
} else {
$('div.connect-cat').each(function(){
var text = $(this).find('span').text().toLowerCase();
if (text.indexOf(valThis) >= 0) { $(this).show(); }
else { $(this).hide(); }
});
}
});
回答by Aaron Chen
$('#box').keyup(function(){
var valThis = $(this).val().toLowerCase();
if(valThis == ""){
$('.connect-cat').show();
} else {
$('.connect-cat').each(function(){
var text = $(this).find("span").text().toLowerCase();
(text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();
});
};
});
If you have multiple "spans" in the div, simply add a class name to it. Then change
如果您在 div 中有多个“跨度”，只需为其添加一个类名。然后改变
var text = $(this).find("span").text().toLowerCase();
var text = $(this).find("span").text().toLowerCase();
to:
到：
var text = $(this).find(".spanClassName").text().toLowerCase();
var text = $(this).find(".spanClassName").text().toLowerCase();
回答by Khann Sothea
Filter by search using text found in element within each div click button:
使用在每个 div 单击按钮内的元素中找到的文本进行搜索过滤：
