how to apply an ajax/json search filter when typing

Question

I am displaying items on a page using json, I also have a search filter with a text box and button I got working so when the item details are included and entered it filters the items to match the search from the user input. Below is the search form and also the js:

<div class="container search-container">
<form class="form-search form-inline"> 
    <input type="text" class="input-medium search-query" placeholder="Search"> <button type="submit" class="btn">Search</button> 
</form>

Calling the json:

$.getJSON('iproducts.json',function(products){
var output = "";
$.each(products.appleitems, function(i, product) { 

    output += 
        "<div class=\"col-xs-12 col-sm-6 col-md-3\"><div class='panel panel-default'><div class='panel-footer'><h4 class='text-center'>"  
        + products.appleitems[i].Product_id 
        + "</h4></div>" + "<img src ='" + products.appleitems[i].Imgpath + "'  style='width:100%;height:250px; display: block;' id='appleinfo_" 
        + products.appleitems[i].Product_id + 
        "' /><p class='lead text-justify'>" + products.appleitems[i].Information
        + "</p><div class='panel-footer'><button class='btn btn-primary btn-block'>&pound;" + products.appleitems[i].Price+"</button></div></div></div>";
    });

$("#container").html(output);
});

filtering the json:

$('.form-search').on('submit',function(){return false;});

$('.form-search .btn').on('click', function(e){ 
var query = $.trim($(this).prevAll('.search-query').val()).toLowerCase(); 
regex = new RegExp(query, "i");
$.getJSON('iproducts.json', function (products) {
    var output;
    $.each(products.appleitems, function (i, product) {

        if (product.Product_id.search(regex) != -1) {
    output += 
        "<div class=\"col-xs-12 col-sm-6 col-md-3\"><div class='panel panel-default'><div class='panel-footer'><h4 class='text-center'>"  
        + products.appleitems[i].Product_id 
        + "</h4></div>" + "<img src ='" + products.appleitems[i].Imgpath + "'  style='width:100%;height:250px; display: block;' id='appleinfo_" 
        + products.appleitems[i].Product_id + 
        "' /><p class='lead text-justify'>" + products.appleitems[i].Information
        + "</p><div class='panel-footer'><button class='btn btn-primary btn-block'>&pound;" + products.appleitems[i].Price+"</button></div></div></div>";
        }
            $('#container').html(output);

            console.log(products.appleitems[i]);
        }
    )
});

I would like to make my search more dynamic, I want the search to narrow down when the user is actually typing in the text box instead of a .click function. I have been trying a few key up methods but have got none of these to work. Does anyone know how I can apply this to my search instead of using a .click function?

Many thanks

Answer 1

Try the keypress event

$('.search-query').on('keypress',function(){
  //get the json
  //filter it
});

Answer 2

https://api.jquery.com/change/ is the correct way to do this.

Use like $('.search-query').on('change', function(e){ ...