Задать вопрос

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

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

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

Для живого поиска логично использовать input, по которому надо отправить текущее value через ajax на сервер и далее ответ куда-то распечатать. Вопрос в другом, ведь событие срабатывает довольно часто, и кто-то печатает так быстро, что и запрос-ответ не успеет, поэтому логично сделать тут debounce с задержкой в приблизительно 300мс, чтобы отправка/получение сработало когда пользователь притормозил в наборе текста или вообще прекратил ввод.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@r_mustang
Ответ написан
Комментировать
@ArrayPop
Старый но хороший вариант
jquery.page2page.ru/index.php5/%D0%90%D0%B2%D1%82%...
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы