Автозаполнение раскрывающегося списка с помощью кнопок ссылок - или «AJAX сумасшедший»

Question

Хорошо, я хочу выпадающее меню автозаполнения с кнопками ссылок в качестве выбора. Итак, пользователь помещает курсор в «текстовое поле» и заваливается списком опций. Они могут либо начать печатать, чтобы сузить список, либо выбрать один из вариантов в списке. Как только они щелкают (или нажимают ввод), набор данных, с которым он связан, будет отфильтрован по выбору.

Хорошо, это так же просто, как завернуть автозаполнение AJAX вокруг выпадающего списка? Нет? (Пожалуйста?)

Answer 1

Я не совсем уверен, что вы хотите, но у Ra-Ajax AutoCompleter определенно есть поддержка "контроля" внутри себя. Вы можете видеть это в окне поиска на Stacked на самом деле (верхний правый угол), где мы используем ссылки. Но это также может быть LinkButtons, если вы хотите ...

Отказ от ответственности; Я работаю с Ра-Аяксом ...

Answer 2

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

 __________  _
|__________||v|__             <-- text and button
  |              |            <-- ul (styled to appear relative to text input)
  |              |
  |              |
  |______________|

ul отображается на:

• Событие 'keyUp' ввода текста (если значение не пустое)
• событие нажатия кнопки ввода (если в данный момент не отображается)

ul скрыто на:

• Событие «нажатия» кнопки ввода (если отображается в данный момент)
• Событие 'click' элементов списка

Когда отображается ul или инициируется событие keyUp текстового ввода, необходимо выполнить AJAX-вызов на сервер для обновления списка.

В случае успеха результаты должны быть размещены на ул. При создании элементов списка они должны иметь прикрепленное к ним событие click, которое устанавливает значение для ввода текста и скрывает ul (возможно, придется добавить ссылку в li, чтобы присоединить событие).

Самая сложная часть - это CSS. JavaScript прост, особенно с надежной библиотекой, подобной прототипу, которая поддерживает несколько браузеров.

Возможно, вы захотите поддерживать некоторые идентификаторы для элементов, поэтому вы можете добавить некоторые скрытые входы в каждый элемент списка с идентификатором и рядом с вводом текста для сохранения идентификатора выбранных элементов.

Answer 3

На мой взгляд, вам не следует использовать AJAX для этого вообще.

вот почему:

(1) На фокусе: ВСЕ опции, которые он может выбрать, показаны в раскрывающемся списке. Это означает, что все возможные варианты уже отправлены клиенту.

(2) Если пользователь что-то вводит, количество записей в раскрывающемся списке фильтруется для соответствия. Это легко сделать на стороне клиента. Быть ajax'y и вернуться к серверу на этом этапе просто замедлит ход событий.

phpguru.org имеет элемент управления, который «почти точно» вам нужен:

http://www.phpguru.org/static/AutoComplete.html#demo

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

Надеюсь, это поможет.

Answer 4

Вам придется обработать событие OnSelectedIndexChanged вашего выпадающего списка, чтобы повторно привязать ваш набор данных на основе выбора пользователей. Если вы хотите, чтобы фильтрация происходила при асинхронной обратной передаче, оберните набор данных (или предполагаемую сетку данных) и ваш раскрывающийся список в UpdatePanel. В любом случае, это один из способов сделать это.