Как можно реализовать живой поиск / поисковые предложения с помощью Dojo?

Question

Я хочу реализовать функцию «живого поиска» или «предложения по поиску» в веб-приложении, использующем Dojo Framework.Это будет похоже на то, как при поиске в Google и Bing отображаются совпадения при вводе: при вводе в поле поиска список потенциальных совпадений отображается ниже.Поиск будет выполняться на стороне сервера, а результаты отправляются обратно в браузер с использованием AJAX.

Кто-нибудь знает хороший способ реализовать это с помощью Dojo?

Вот несколько возможных вариантов:

• Встроенный виджет dijit.form.ComboBox
  Это имеет очень похожую функциональность, ноЯ видел только его использование с ограниченными наборами данных.В примерах всегда используются небольшие списки (например, 50 штатов в США) и предварительно загружается весь набор данных для фильтрации на стороне клиента.Однако я предполагаю, что мог бы подключить его к dojox.data.JsonQueryRestStore для поиска на стороне сервера - кто-нибудь может подтвердить, работает ли это?

• QueryBox http://marumushi.com/code/querybox/
  Эта реализация в основном выполняет свою работу, но в ней есть некоторые незначительные ошибки и не похоже, что она поддерживается.Я должен был бы сделать некоторые исправления в коде перед его использованием.

• Medryx http://blog.medryx.org/2008/09/10/dijitsearch-part-2/
  Это также выглядит так, как будто оно выполняет свою работу, но оно описанопоскольку код «альфа-уровня» и ссылка на код, кажется, не работают ...

Я мог бы, вероятно, сделать один из вышеупомянутых работ, но я хотел бы знать, еслиЕсть ли лучшие альтернативы там.

Answer 1

Я реализовал это 5 лет назад, когда Додзё был в 0,2:

• http://www.lazutkin.com/blog/2005/12/23/live-filtering/

Хотя код древний, он тривиален, и, надеюсь, это 'дам вам идеи о том, как атаковать его.Черновой набросок:

• Присоедините обработчик событий к вашему полю ввода, который срабатывает при изменениях - используйте «onkeyup» для обнаружения изменений в поле ввода.
• Подождите, пока пользовательпрекратил печатать, установив таймер в свой обработчик событий, если он еще не установлен.200-500 мс - хорошее время ожидания.
  • Тайм-аут играет двойную роль:
    • Он ограничивает наши запросы к серверу для предотвращения перегрузки.
    • Он влияет на наше восприятие времени и наши привычки при печати. ​​
• Если наш тайм-аут истек, и мы не ждем сервера ⇒ отправим на сервер имеющуюся у нас строку.
• Если мывсе еще жду сервера, отмени запрос и еще раз спроси.
  • Эта часть относится к конкретному приложению: мы не хотим перегружать сервер, и иногда сервер не может хорошо обрабатывать разорванные соединения.
  • В этом примере я не отменяю вызов XHR, но дождитесь его завершения, прежде чем отправлять новый запрос.
• Сервер отвечает соответствующими результатами, которые быстро отображаются.

В посте блога, который я реализовалэто как виджет.Очевидно, что точная упаковка зависит от вас.