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

【问题标题】：how to apply an ajax/json search filter when typing键入时如何应用 ajax/json 搜索过滤器
【发布时间】：2015-12-14 11:12:07
【问题描述】：

我正在使用 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 函数？

非常感谢

【问题讨论】：

标签： javascript jquery json ajax

【解决方案1】：

尝试按键事件

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

【讨论】：

这对我来说似乎是正确的答案，但我想在用户输入停止和发出http 请求之间必须有一段时间。每次按键都调用api 似乎不是最佳的。 .
最好在页面加载时将该 json 放在 localsotrage 中，如果您不想要多个 ajax 事件，请搜索 localstorage
这似乎是个糟糕的选择，因为服务器数据可能会在将其存储在本地存储和发出 http 请求之间进行更新。这与个人选择无关。它与性能有关。。
向localsorage添加一个修改参数并做一个ajax来测试json是否更新，如果更新了对ubdated内容做ajax
LocalStorage 在这里不适用。可能有大量记录需要搜索。这就是我要求避免不必要的请求和数据库操作的原因。每个浏览器对 localStorage 存储都有一些限制..

【解决方案2】：

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

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

【讨论】：

得到这个工作人员的关键 - $('.search-query').keyup(function(e){ var output="";