Как правильно сделать живой поиск?

Как правильно сделать живой поиск на сайте? Сделал запрос на сервер по keyup, но если пользователь набирает слово кирпич, то скрипт по каждой набранной букве отправляет запрос на сервер, тем самым, если пользователь наберет быстро, то он приходится ждать пока окончательный список сформируется, завершив поиск по каждой букве. А если набирая слово универсальный, написать униВВ, то результаты пропадают, тогда как на других сайтах, остается последний удачный результат. Вот тут например сделан по нормальному https://santika-online.ru

Какие механизмы для этого есть?
  • Вопрос задан
  • 1050 просмотров
Решения вопроса 1
dimovich85
@dimovich85
JS is everywhere
Для работы с полями ввода есть набор событий:
1. focus - пользователь поставил фокус на поле ввода.
2. blur - пользователь убрал фокус с элемента вода.
3. input - пользователь как-то что-то ввел. Это лучше, чем keyup, ибо не надо проверки keyCode, второе потому что пользователь может в поле вставить текст, что тогда будет с Вашим keyUp? Событие input срабатывает каждый раз, как пользователь сделал изменение в поле ввода.
4. change - пользователь ввел данные и убрал фокус с поля ввода, то есть это input + blur. Событие происходит не так часто, как input, но и не заставляет проверять value на изменение, как это придется делать при blur.
5. submit - срабатывает на всей форме, при попытке отправить данные, в данной задаче скорее не интересное событие.

Для живого поиска логично использовать input, по которому надо отправить текущее value через ajax на сервер и далее ответ куда-то распечатать. Вопрос в другом, ведь событие срабатывает довольно часто, и кто-то печатает так быстро, что и запрос-ответ не успеет, поэтому логично сделать тут debounce с задержкой в приблизительно 300мс, чтобы отправка/получение сработало когда пользователь притормозил в наборе текста или вообще прекратил ввод.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
от 60 000 до 90 000 руб.
Zoon Москва
от 200 000 руб.
Страховой Кабинет Нижний Новгород
от 60 000 до 90 000 руб.
18 июл. 2019, в 11:59
20 руб./за проект
18 июл. 2019, в 11:57
13000 руб./за проект
18 июл. 2019, в 11:57
1500 руб./за проект