Блог

Я пытаюсь добавить определенное количество результатов поиска при выполнении поиска в моем #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 >>'>");
        });
  

Если я правильно читаю ваш код, ваша переменная jsonData содержит все возможные результаты поиска, а затем ваша функция keyup фильтрует эти результаты поиска и на данный момент отображает все совпадающие результаты, но вы хотите ограничить его отображением только первых x элементов, которые совпадают?

Если это так, то вам просто нужно вести подсчет того, сколько вещей вы уже добавили, и останавливаться, когда это количество превысит некоторый установленный предел или когда у вас закончатся данные (в зависимости от того, что наступит раньше).

Я не буду повторять здесь всю функцию, но что-то вроде этого:

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

for(var i = 0, count = 0; i < jsonData.length amp;amp; 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
   }
}
  

Вы должны сделать это в коде 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);
  

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

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

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