Show / hide divs based on search.keypress (filter)
I have a web page with a lot of "cards". I want to filter out some maps as I type in the search box, and when I remove the character, show them again (all when empty).
My problem is that it doesn't work as expected, it is "1 character behind" that I write, it also does not display cards when I delete characters.
It also won't work when I finally write all the criteria, it will find 3-4 cards when I am missing a few letters.
This is the code I have:
$('#search').keypress(function(){
$( ".champion" ).each(function( index ) {
if ( $( this ).find('.name-tag').text().toLowerCase().indexOf($('#search').val().toLowerCase(), 0) == -1) {
$(this).hide();
} else {
$(this).show();
}
});
});
I also tried replacing it:
$('#search').keypress(function(){
$( ".champion" ).each(function( index ) {
if ( $('#search').val().toLowerCase().indexOf($( this ).find('.name-tag').text().toLowerCase()) == -1) {
$(this).css('opacity', '0.7');
} else {
$(this).css('opacity', '1');
}
});
});
source to share
This can be achieved by delaying the event by about 10ms, the user won't notice the difference, but he will help you by your side.
I made a fiddle for your problem.
Here's what it basically does:
$(function () {
var input = $("#entry");
input.keydown(function () {
// doesn't matter if you create an anonymous method or a regular method, only the setTimeout is of value
setTimeout(function () {
var s = $("#show");
s.text(input.val());
}, 10);
});
});
The second issue is based on the keypress event, which doesn't seem to capture the backspace key. Better to use an event handler keydown
as this captures every key.
source to share
Since you are using "keypress" it will always give you the value "1 character behind". Better to use the "keyup" event.
I think you are trying to toggle opacity based on the entered search text. If this is what you are looking for, check out this fiddle:
JS code:
$(function () {
$("#search").keyup(function(){
var $target = $("#target"); $target.find("li.champion").css("opacity", "0.7");
$target.find("li.champion:contains('"+this.value+"')").css("opacity","1");
});
});
HTML:
<input type="text" id="search" placeholder="type in here" />
<ul id="target">
<li class="champion">
<span class="name-tag">abcd</span>
</li>
<li class="champion">
<span class="name-tag">abcd</span>
</li>
<li class="champion">
<span class="name-tag">deds</span>
</li>
.....
</ul>
Here's how it's done:
-
Add "onKeyUp" event listener to "search" field
-
Using jQuery ": contains" the selector we set the opacity to "1" for the matched element and for others to "0.7" For more details on the ": contains" selector Check here .
Hope it helps.
source to share
Thank you for the keyboard / keyboard hints and delay.
It turned out that I needed to store the values before executing the test, this is the final code:
$('#search').keydown(function () {
setTimeout(function () {
$( ".champion" ).each(function( index ) {
var nameTag = $( this ).find('.name-tag').text().toLowerCase();
var searchStr = $('#search').val().toLowerCase();
if (nameTag.indexOf(searchStr) == -1) {
$(this).hide();
} else {
$(this).show();
}
});
}, 10);
});
source to share