Поиск/фильтр функция JSON нуждается в редактировании

Question

У меня есть функция 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 (output); .

Изменить на:

$ ('#') контейнера HTML (выход);

Надеюсь, что это поможет