Я знаю, что это довольно давно, поэтому я сомневаюсь, что вам все еще нужен ответ, но, возможно, он будет полезен кому-то другому.
Буквально на прошлой неделе мне пришлось создать такой элемент управления, как это делает для нас. По сути, это две основные части: служба JSON, которая принимает частичный текст и возвращает список предложений, и элемент управления HTML / CSS / jQuery + UI.
Сервис довольно прост, поэтому мы пропустим это здесь.
Я делаю write-up на веб-стороне, но в основном мы обернули автозаполнение jQuery с помощью некоторого настраиваемого CSS, чтобы сделать ввод, похожий на адресную строку в GMail. Это было сделано путем стилизации контейнера div так, чтобы он выглядел как длинное поле ввода. Фактическое поле ввода находится внутри этого контейнера и стилизовано так, чтобы быть практически невидимым. Щелчок по контейнеру перемещает фокус в поле ввода. После выбора предложенного имени я создаю новый контейнер для вставки перед «замаскированным» вводом автозаполнения, который содержит имя пользователя и скрытый ввод с желаемым значением для отправки при отправке формы. Мне пришлось сделать несколько других перегрузок для автозаполнения, чтобы заставить его работать согласованно, но по сути это все, что нужно было сделать.
Элемент управления ищет в контейнере атрибут data-input-name, чтобы выяснить, какое «имя» установить для скрытых входов, когда они создаются при выборе каждого пользователя. Когда форма отправляется, связыватель модели по умолчанию свертывает всех пользователей определенного средства выбора (поскольку у вас может быть несколько на странице) в строковые массивы значений - при условии, что ваша модель имеет свойства строкового массива с тем же именем, что и ввод элементы управления, которые затем мы можем обработать на стороне сервера.
Безусловно, самым сложным было найти правильный HTML + CSS, чтобы добиться правильного внешнего вида. Я не очень сильный пользователь пользовательского интерфейса, так что это заняло у меня вечность, и я все еще терплю неудачу в Chrome, который, кажется, добавляет акцент вокруг полей ввода даже со стилями (или из-за?), Которые заставляют его сливаться с родительским элементом управления.
Для наших целей последнюю неделю он отлично работал.
ОБНОВЛЕНИЕ: теперь оно на GitHub с Демо.
person
Erik Noren
schedule
11.02.2013