Текстовое поле, содержащее несколько значений, предложения в раскрывающемся меню (например, поле «Кому:» в Gmail) - PullRequest
2 голосов
/ 18 января 2011

Мне нужна функциональность в моем веб-приложении, похожая на раскрывающийся список предложений Gmail при вводе адресов получателей или раскрывающийся список Stack Overflow при вводе тегов в составе вопроса.

В Gmail есть текстовое поле для адреса «Кому:». Как только вы начнете печатать, появится выпадающий список с предложениями. Если вы введете точку с запятой или запятую, вы можете ввести другой адрес. Опять же, как только вы начнете вводить этот адрес, появится выпадающий список с предложениями.

Предложения - это подмножество вашей адресной книги, содержащее введенный вами текст. (Например, если вы ввели «jo», то « Jo hn» и «Foo jo e» будут отображаться как предложения, но «XYZ» - нет.) Соответствующая часть слова выделено жирным шрифтом.

Если вы нажмете «ввод» или воспользуетесь клавишами курсора вверх и вниз, вы сможете перемещаться по раскрывающемуся списку предложений.

Я мог бы запрограммировать это сам, однако у меня есть ощущение, что должны быть стандартные решения, которые я мог бы включить. Тем не менее, все, что я нашел, было решения, где значение поля привело к предложениям, а не значение текущей части поля привело к предложениям (где каждая часть была разделена разделителем, для пример "," или ";" в случае Gmail или пробел в случае тегов переполнения стека).

Я использую Wicket (веб-инфраструктуру на стороне сервера Java), поэтому было бы неплохо любое решение для Wicket, но в противном случае я уверен, что смогу включить в проект любую простую библиотеку Javascript.

Ответы [ 4 ]

3 голосов
/ 18 января 2011

jQueryUI - автозаполнение - отличный плагин.

http://jqueryui.com/demos/autocomplete/#multiple

Ссылка на пример "множественных значений", который почти дословно описывает то, что вы описали;он соответствует частичным словам из середины, он позволяет навигацию по ключу, несколько записей.

2 голосов
/ 18 января 2011

Для этого вы можете использовать класс AutoCompleteTextField в wicket-extensions.

Wicket examples - пример реализации в качестве первого элемента в его секции AJAX ,Ссылку на исходный код довольно сложно увидеть, она находится по правому краю серой полосы.

(в описании даже написано "как в Google предлагают!")

1 голос
/ 18 января 2011

В проекте Wicketstuff имеется компонент автозаполнения.Существует Блог о том, как его использовать.

1 голос
/ 18 января 2011

Для этого есть несколько плагинов JQuery, например:

FCBKcomplete

Токенизация автозаполнения ввода текста

...