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">🔍</span> <input type="search" class="form-control" placeholder="Search" aria-describedby="basic-addon1"> </div> </li>
Advertisement
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