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">🔍</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