如何在打字時應用ajax/json搜索過濾器

我在使用json的頁面上顯示項目，我也有一個帶有文本框和按鈕的搜索過濾器我開始工作，所以當包含項目詳細信息並輸入過濾器時這些項目與用戶輸入中的搜索相匹配。下面是搜索形式，也是JS：如何在打字時應用ajax/json搜索過濾器

<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 f時，搜索範圍縮小結。我一直在嘗試一些關鍵的方法，但沒有得到這些工作。有誰知道我可以如何將它應用於我的搜索，而不是使用.click函數？

非常感謝

來源

2015-12-14 laurajs

試試按鍵事件

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

來源

2015-12-14 11:15:32 madalinivascu

這似乎是正確的答案給我，但我想一定有用戶打字停止，使得之間的一些時間跨度'http' request..Making'每個按鍵似乎並不api'呼叫最佳.. – Rayon

更好地把這個JSON在頁面加載localsotrage，然後搜索本地存儲，如果你不想多個Ajax事件 – madalinivascu

這似乎是一個錯誤的選擇，因爲服務器數據可能會更新之間存儲它在本地存儲和製作'http'請求..這不是關於個人選擇..關於性能.. – Rayon

https://api.jquery.com/change/是這樣做的正確方法。

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

來源

2015-12-14 11:18:32

讓這個工作夥伴關注 - $（'。search-query'）。keyup（function（ e）{ \t var output =「」; – laurajs

如何在打字時應用ajax/json搜索過濾器

回答

相關問題