Antarr Byrd Antarr Byrd - 6 months ago 10
Javascript Question

Jquery keyup event not firing

I'm trying to create handle the keyup event in a search field in my page using JQuery. The event is not being fired however, I don't see anything in the console.

relevant javascript



$('input[type=search]').keyup(function () {
var query = $(this).val().toLowerCase();
console.log(query);
$('li.file').each(function (index, element) {
var name = $(element).text().toLowerCase();
if (name.indexOf(query) >= 0) {
$(this).removeClass('hidden');
} else {
$(this).addClass('hidden');
}
});
});


search field



<li>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">&#128269;</span>
<input type="search" class="form-control" placeholder="Search" aria-describedby="basic-addon1">
</div>
</li>

Answer

i check your sample on my side all run find. try replacing your code by something like the following :

  $(function(){
    $('input[type=search]').keyup(function () {
        var query = $(this).val().toLowerCase();
        console.log(query);
        $('li.file').each(function (index, element) {
            var name = $(element).text().toLowerCase();
            if (name.indexOf(query) >= 0) {
                $(this).removeClass('hidden');
            } else {
                $(this).addClass('hidden');
            }
        });
    });
    });

To be sure to call your function when the DOM is ready