Filter your search by text found in an element inside each div
I found a fiddle that was helpful for hiding text based on the text used in the search box, but couldn't figure out how to adapt this method to a div with multiple elements in it. How can I change jQuery in the attached script so that it filters the div elements that match the entered query instead of the text found in the list elements?
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>
JQuery is used here:
$('#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();
});
};
});
source to share
If I need to add another text element to each div field, is there a way so that all the text in each div can be searchable? Here's a fiddle with one extra text element - jsfiddle.net/point71echo/mttgj1tt/1 - point71echo
Here is a solution for finding two elements at once in native JavaScript without any libraries.
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 silly long DOM functions):
$("#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();
});
This should only match divs with class connect-cat and filter inside the range.
$('#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(); }
});
}
});
source to share
$('#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 a div, just add the class name to it. Then change
var text = $(this).find("span").text().toLowerCase();
in
var text = $(this).find(".spanClassName").text().toLowerCase();
source to share
