javascript - 搜索/过滤 json 函数需要编辑

Question

我有一个 get 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);
});

它还包括一个搜索/过滤文本框和按钮，使这些项目出现在我的代码中。我修改了代码，现在搜索功能不再起作用我已经尝试了所有方法。这是实际的搜索框:

<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>

以及我用来过滤这些的脚本:

$('.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>";
        }
            $('#placeholder').html(output);

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

Answer 1

尝试将搜索脚本上的#placeholder更改为#container:

$('#placeholder').html(输出);

更改为:

$('#container').html(输出);

希望这有帮助