Выпадающий список автозаполнения с помощью Linkbuttons - или “AJAX сошел с ума”

StackOverflow https://stackoverflow.com/questions/40422

  •  09-06-2019
  •  | 
  •  

Вопрос

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

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

Это было полезно?

Решение

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

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

ul, показанный на:

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

ul скрыт на:

  • событие "щелчка" при вводе кнопки (если она в данный момент видна)
  • событие "щелчка" по элементам списка

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

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

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

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

Другие советы

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

Я не совсем уверен, чего вы хотите, но Ра-Аякс Автозаполнитель определенно есть поддержка наличия "элементов управления" внутри себя.Вы можете увидеть это в окне поиска по адресу Сложенный фактически (верхний правый угол), где мы используем ссылки.Но это также могут быть кнопки ссылок, если вы хотите...

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

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

вот почему:

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top