限制一個簡單的jQuery鍵盤搜索框搜索結果的數量

Question

當我在#searchbox中進行搜索時，我試圖獲得一定數量的searchresults，以便能夠在結果div中追加過多搜索列表。我在這裏停滯不前，不知道如何繼續。

var jsonData; 

      $.getJSON("<?php echo base_url(); ?>/show_controller", function(json){ 
       jsonData = json; 

      }); 


     $("#searchbox").keyup(function() 
     { 
      var searchvalue = $("#searchbox").val(); 
      $("#searchresult").empty(); 
      $("#step2").remove(); 
      $("#searchresult").append("<table>"); 
      $("#searchresult").append("<td><b>Name</b></td>"); 
      $("#searchresult").append("<td><b>Description</b></td>"); 
      $("#searchresult").append("<td><b>Manufacturer</b></td>"); 
      $("#searchresult").append("<td><b>Batch</b></td>"); 
      $("#searchresult").append("<td><b>Sign for registration</b></td>"); 
      for(var i = 0; i < jsonData.length; i++) 
       { 

        if(jsonData[i]['Name'].indexOf(searchvalue) != -1 || jsonData[i]['Desc'].indexOf(searchvalue) != -1) 
        { 
         $("#searchresult").append("<tr>"); 
         $("#searchresult").append("<td>" + jsonData[i]['Name'] + "</td>"); 
         $("#searchresult").append("<td>" + jsonData[i]['Desc'] + "</td>"); 
         $("#searchresult").append("<td>Manufacturer(nodata yet)</td>"); 
         $("#searchresult").append("<td>Batch(nodata yet)</td>"); 
         $("#searchresult").append("<td class='listdata'><input type='checkbox' class='user' id='" + jsonData[i]['id'] + "'></td>'"); 
         $("#searchresult").append("</tr>"); 
        } 



       } 
      $("#searchresult").append("</table>"); 
      $("#content").append("<input type='submit' id='step2' value='Next >>'>"); 
     }); 

Answer 1

您應該在JSON調用的PHP代碼中執行此操作。

如果因任何原因，你不能，然後修改下面一行：

//for(var i = 0; i < jsonData.length; i++) 
var maxLimit = 15; 
var limit = jsonData.length < maxLimit ? jsonData.length : maxLimit ; 
for(var i = 0; i < limit ; i++) 

顯然，這將循環限制爲15次迭代，你可以根據需要修改這一點。

我還建議你改變你正在撥打的電話號碼.append()。如果將整個表格行構建爲字符串或jquery對象，並且只附加一次，那麼效率會更高。

var tableHeadings = "<table>\ 
    <td><b>Name</b></td>\ 
    <td><b>Description</b></td>\ 
    <td><b>Manufacturer</b></td>\ 
    <td><b>Batch</b></td>\ 
    <td><b>Sign for registration</b></td>"; 
$("#searchresult").append(tableHeadings); 

Answer 2

您可以通過檢查循環變量i限制它 - 說，如果它超越10再破for循環。

更好的方法是將max參數傳遞到您的服務器端網址，該網址返回搜索結果，以便它只返回最大結果。

OTOH，您可以將overflow:auto css添加到您的div，以在有許多搜索結果時獲取滾動條。

Answer 3

如果我在讀你的代碼就在您的jsonData變量包含這些搜索結果中的所有可能的搜索結果，然後你KEYUP功能的過濾器和此刻卻顯示所有匹配的結果，但希望將其限定爲僅顯示匹配的第一個x項目？

如果是這樣，那麼你只需要保持你已經附加了多少東西的計數，並在該計數超過某個預設限制或當數據用完時（以先到者爲準）停止計數。

我這裏就不再重複了整個功能，但這樣的事情：

var maxResults = 10; // or whatever your limit is 

for(var i = 0, count = 0; i < jsonData.length && count < maxResults; i++) 
{ 
    if(jsonData[i]['Name'].indexOf(searchvalue) != -1 || jsonData[i]['Desc'].indexOf(searchvalue) != -1) 
    { 
     // only increment count when you find a match 
     count++; 

     $("#vaccine_searchresult").append("<tr>"); 
     $("#vaccine_searchresult").append("<td>" + jsonData[i]['Name'] + "</td>"); 
     // etc 
    } 
}