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

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

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

Источник

4 ответа

Решение

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

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

ul показывается на:

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

ul скрыто на:

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

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

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

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

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

Источник

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

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

Источник

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

Источник

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

вот почему:

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

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

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

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

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

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

Источник
Другие вопросы по тегам