如何在键入时应用ajax/json搜索过滤器

how to apply an ajax/json search filter when typing

本文关键字：ajax json 搜索 过滤器 应用      更新时间：2023-09-26

我使用json在页面上显示项目，我还有一个带有文本框和按钮的搜索过滤器，我开始工作，所以当项目详细信息被包括并输入时，它会过滤项目，以匹配用户输入的搜索。下面是搜索表单和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>

调用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);
});

过滤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]);
        }
    )
});

我想让我的搜索更具动态性，我希望当用户实际在文本框中键入而不是.click函数时，搜索范围缩小。我一直在尝试一些关键的方法，但都没有奏效。有人知道我如何将其应用于搜索而不是使用.click函数吗？

非常感谢

尝试按键事件

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

https://api.jquery.com/change/是正确的方法。

像$('.search-query').on('change', function(e){ ... 一样使用

相关文章：