@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>')
          }
        });
      });
   });
});
  • Вопрос задан
  • 51 просмотр
Решения вопроса 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...
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Dinesh_Chugtai
В твоем случае проблема скорее в постановке задачи. Для того, чтобы что-то оптимизировать, необходимо понять:

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы