Как оптимизировать поиск по сайту?

Question

[devilwish]

Всем привет.Пишу учебный интернет магазин по урокам Алекса Лущенка(кто понял тот поймет).
Написал вот такой классический поиск по товарам,но в поисковой строке выводится сразу весь перечень json и при вводе первых букв названия,выводится только самые первые товары в json.Как это можно оптимизировать или может быть есть какая нибудь полезная статья,как лучше писать поиск?Спасибо.

$(document).ready(function(){
   $('#search').keyup(function(){
      $('#result').html('');
      var searchField = $('#search').val();
      var expression = new RegExp(searchField,  "i");
      $.getJSON('cargo.json', function(data){
        $.each(data, function(key, value){
          if(value.name.search(expression) != -1 || value.location.search(expression) != -1)
          { 
            $('#result').append('<li style="list-style-type: none;margin:2px;border-bottom:1px solid #333;"><a href="'+key+'" title=""><img src="'+value.img+'" height:"40" width="40">'+value.name+'</a></li>')
          }
        });
      });
   });
});

Answer 1

[Александр Докин]

Смотрите, в приведенном выше коде вы на каждое нажатие кнопки делаете два действия:
- запрос на получение json-файла,
- вычисляете, какие элементы нужно отрисовать в списке.

1. Предполагаю, что cargo.json не изменяется в момент ввода текста в поисковой строке, верно? А значит нет смысла читать его каждый раз по сети. Т.е. вы можете один раз запросить его содержимое, и затем результат сохранить в памяти (в переменной). Соответственно элементы рендерить, фильтруя этот результат.

2. Никому никогда не надо искать что-то из 1-2 символов. Поэтому обычно вводят минимальную длину поисковой фразы, начиная с которой производят поиск. К примеру это может быть 3 символа. Т.е. лишь вводя в поле 3 символа и больше, пользователь будет запускать поиск.

3. Люди набирают текст с разной скоростью. Кому-то, чтобы ввести в поиске слово "товар", нужно 10 секунд, а кто-то справится за 1 секунду... И во втором случае совершенно не нужно 5 раз (на каждый символ) выполнять описанные действия. Поэтому, если между нажатиями проходит "слишком мало времени", предыдущим можно пренебречь. Это т.н. время задержки. Как правило, достаточно 300-500 мс.

4. Конечно, в интернет-магазинах товары хранятся не в статических файлах (как в примере), а в базах данных. Представляете, если в магазине миллиард товаров, и все будут храниться в огромном json-файле. В вашей реализации нужно будет этот скажем 10Мб файл читать и потом по этому миллиарду строк еще и фильтровать. Поэтому механизм поиска всегда реализуется средствами бекенда. В итоге на конкретный эндпоинт отправляется строка поиска, а в ответе приходят результаты, которые вы рендерите.

PS. Я намеренно не написал тут ни строчки кода, ведь это учебный проект, а значит вы самостоятельно должны эти моменты (1-3) реализовать. Если что, можете посмотреть исходники готовых решений, они тоже будут реализовывать описанное выше: https://github.com/search?l=JavaScript&q=autocompl...

Answer 2

[Dinesh_Chugtai]

В твоем случае проблема скорее в постановке задачи. Для того, чтобы что-то оптимизировать, необходимо понять:

1. Конечный результат
2. Текущий результат

В вопросе, возникает еще больше вопросов:

1. Что ты подразумеваешь по классическим поиском?
2. Самые первые это сколько? Какого результата ты хочешь достичь?