@Stan_1

Как быстро перестраивать выпадающий список в HTML?

Наверное, криво сформулировал вопрос, но суть вот в чем.

Допустим, есть поисковый движок, который по мере ввода юзером поискового запроса должен показывать выпадающий список и перестраивать его содержимое - примерно как автозаполнение в Google. При реализации есть такая проблема: скорость ввода юзером запроса составляет примерно 80-100 мс на символ, а поисковый движок отдает результат через 120-150 мс. В итоге, перерисовка списка не успевает за вводом текста.

Отсюда есть негативные эффекты - юзер добирает запрос до конца, видит не релевантный результат, начинает стирать и переписывать часть запроса, усугубляя проблему. Какие есть правильные пути (best way) для решения такой проблемы?

Вчера попробовал "отменять" запрос при каждом нажатии символа, но тогда выпадающий список вообще по факту появляется в самом конце, когда юзер останавливает ввод.

Еще есть такой вариант при вводе очереденого символа смотреть, закончена ли загрузка ответа от предыдущего запроса, и если нет, то не отправлять новый. Тем самым будут пропуски, но не будет отставания перерисовки результата от ввода юзером символов запроса.

Но может быть есть какие-то типовые наработки, чтобы все работало шустро, как в google или amazon?

Заранее спасибо
  • Вопрос задан
  • 2691 просмотр
Пригласить эксперта
Ответы на вопрос 2
IonDen
@IonDen
JavaScript developer. IonDen.com
searchengineland.com/how-google-instant-autocomple...

Мне видится это так:

Во первых кэш, кэшируем полученный результат в хэш таблице. Скажем "jav", "java", "javas", "javasc" и т.п. сохраняем результаты поиска на каждый из этих запросов, это поможет при стирании, перед запросом проверяем, есть ли данные в кэше и показываем оттуда.

Далее по мере того как юзер печатает мы наполняем кэш и показываем данные по мере готовности.

Если хочется еще больше отзывчивости то вот тут можно начать предсказывать: например когда пользователь написал "javasc" то на сервере уже можно очень достоверно предсказать возможные продолжения "javascr", "javascri", "javascrip", "javascript" и заранее прислать результаты на эти слова.
Ответ написан
mlnkv
@mlnkv
JavaScript Developer
можно сделать что то типа этого
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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