Как работают предложения автозаполнения? - PullRequest
8 голосов
/ 08 декабря 2008

Например, если вы введете что-то в верхнем правом углу окна поиска google / yahoo в Firefox, будет что-то вроде «предложенного автоматического завершения».

Другой пример - окно поиска YouTube и поле редактирования тегов Stackoverflow, расположенное под этим предварительным просмотром вопроса. Как они работают? Какие технологии стоят за ними?

Ответы [ 8 ]

8 голосов
/ 08 декабря 2008

Это сделано с использованием AJAX, на этом сайте есть хорошее руководство: AJAX Suggest Tutorial и WaybackMachine версия, так как веб-сайт кажется недоступным .

Насколько я знаю, база данных с ключевыми словами и небольшим количеством кода - это все, что нужно.

Я учусь, как использовать это прямо сейчас на самом деле, для работы. :)

Другой ресурс - w3schools . Они также это охватили.

5 голосов
/ 04 сентября 2016

Какая технология стоит за ними?

Если вам интересно, какая структура данных используется под ней, тогда она называется " trie ", и для использования меньшего количества пространства по сравнению с попытками вы можете использовать "DAFSA"

Как они работают?

оба реализованы в виде дерева, где каждый узел дерева соответствует одному символу в строке, а символ, который появляется раньше, является родителем символа, который появляется позже, например, Строки «tap», «taps», «top» и «tops» хранятся в Trie (слева) и DAFSA (справа), так что, когда вы начинаете вводить tap .. дерево пересекается на основе введенных символов и показывает предложения, основанные на некотором весе, назначенном для каждого слова, вес может быть назначен на основе частоты использования слова.

The strings

Поиск строки в худшем случае - это время O (m), где m - длина строки.

На изображение ссылаются из articel википедии: DAFSA , trie

3 голосов
/ 08 декабря 2008

Обычно они используют JavaScript:

  • Посмотрите на локальный массив всех возможных значений
  • Запросить другую страницу (т.е. /autocomplete.php?q=partialText) в фоновом режиме.
  • Позвоните в веб-сервис.

Когда в JavaScript есть список записей для отображения, он изменяет страницу для отображения поля автозаполнения.

Если вы хотите разместить на своем веб-сайте поле автозаполнения, я использовал и нашел следующее очень хорошим. Он также основан на популярном фреймворке jQuery.

Плагин автозаполнения jQuery

2 голосов
/ 01 февраля 2009

Все довольно просто.

Клиентская сторона:

  1. Захватить нажатия клавиш в поле формы
  2. При нажатии клавиши сделать AJAX-запрос к серверу.
    1. Если немедленно нажать еще одну клавишу, отмените текущий запрос AJAX, поскольку он устарел сейчас
    2. Создайте новый AJAX-запрос с обновленными символами в поле формы
  3. Показать ответ сервера клиенту

Сторона сервера:

  1. Все слова уже сгруппированы по алфавиту
  2. Если запрос клиента на "ove" находит все слова, начинающиеся с ove, упорядоченные по популярности
  3. Вернуть лучшие совпадения клиенту
1 голос
/ 04 декабря 2013

В статье Smashing Magazine (ссылка ниже) есть отличный селектор стран с открытым исходным кодом, в котором обсуждается проблемы юзабилити с простыми автозаполнениями решений и исправляет их.

Хотя я UX, а не Dev, я уверен, что умный разработчик мог бы адаптировать этот открытый исходный код для обработки других видов выборов, а не только названий стран. :)

Отказ от ответственности: я не имею отношения к людям, которые сделали этот Выбор страны. Я просто случайно узнал об этом, и мне нравится делиться информацией об удобстве использования с разработчиками, FWIW.

0 голосов
/ 09 ноября 2015

Я также недавно работал над функцией автозаполнения, и мы использовали lucene для индексации текста, который будет отображаться при автозаполнении. Поиск быстро с люценом. На что следует обратить внимание при работе с данными автозаполнения:

  1. Свежесть предложений,
  2. Зависимость от долгосрочных данных,
  3. Региональная зависимость,
  4. Зависимость от языка
0 голосов
/ 01 февраля 2009
0 голосов
/ 08 декабря 2008

Ответов на это столько же, сколько их разных реализаций. Наш AutoCompleter, который вы можете увидеть в Stacked , работает, вызывая событие, которое затем обрабатывается в коде, заданном на странице .ASPX, с которой вы заполняете ControlCollection любыми элементами управления, которые вы пожелаете. Однако в Stacked мы используем только литеральные элементы управления, а текстовое содержимое является якорными ссылками. Но мы могли бы добавить флажки или изображения, если бы мы хотели ...

Если вы работаете в ASP.NET, наш AutoCompleter - отличное место для начала. Если вы занимаетесь «чем-то другим», то, вероятно, ScriptAculous AutoCompleter - еще одно хорошее место для начала ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...