Ограничьте количество результатов поиска из простого окна поиска jQuery keyup

Question

Я пытаюсь получить определенное количество результатов поиска, добавляемых при выполнении поиска в моем #searchbox, чтобы иметь возможность не добавлять слишком много поисковых списков в результат 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

Если я правильно читаю ваш код, ваша переменная 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
   }
}

Answer 2

Вы должны сделать это в коде PHP, который вызывает JSON.

Если по какой-либо причине вы не можете, то измените следующую строку:

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

Вы можете ограничить его, проверив переменную цикла i - скажем, если она превышает 10, тогда прервите цикл for.

Лучше было бы передать параметр max на URL-адрес вашей стороны сервера, который возвращает результаты поиска, чтобы он возвращал только максимальные результаты.

OTOH, вы можете добавить overflow:auto css к вашему div, чтобы получить полосы прокрутки, когда есть много результатов поиска.