Автоподсказка для тэгов
Хочу сделать добавление тэгов, проще объяснить на картинке:
![]() При печатании, выскакивает автоподсказка, со списком тэгов. Если выбрать тэг из автокомплита или поставить разделитель(запятую к примеру) то тэг превратится в кнопочку(на рисунке два тэга-кнопки index и ipo). Знаю что есть готовый autocomplete для jquery. Есть ли что-то готовое, что еще поможет мне в этой задаче? Если нет, то оцените, правильно ли я решаю задачу. Сейчас то что на картинке, это большой input, по верх него с асболютным позиционирование ul-список. Каждый раз при когда мы выбираем из автоподсказки, или ставим запятую, в этот список добавляется новый тэг, а padding у input'а увеличивается на ширину ul, а текст удаляется. На рисунке в input'е value == 'еще тэг'. С другой стороны мне приходится настоящее значение со списком тэгов забивать в спрятанный input. Хотя я не думаю что будут посетители с отключенным яваскриптом, и для поисковика не важен этот сайт. К сожалению я еще это не сделал, вот только обдумываю как лучше будет) Есть какие-то замечания? У меня опыта в JS не много) |
Имхо, будет неудобно юзеру, убегающее от взгляда поле для ввода не самый приятный вариант как не крути.
Надо не так: [index] [ipo] блабла а так: блабла [index] [ipo] Добавление тупо по enter'у. И реализация сразу упрощается.)) |
Да действительно так удобнее :) А как в таком случае рассчитать отступ для списка с кнопками-тэгами ?
То есть input будет небольшой длинны? Дело в том что хром подсвечивает input желтой рамкой, и я не знаю как от нее избавится, если делать input небольшим, то это будет видно |
А зачем?
input, а за ним список. Минимальная ширина input'а фиксированная, если становится короток - увеличивается, автоматом сдвигая список. Как-то так. Можно ещё всяких свистелок-перделок наворотить с анимацией. Главное чтоб не в ущерб скорости ввода. |
То есть на деле будет так:
вводим тэг, выбираем по автокомплиту, далее: если хотим вести поиск по мультитэгам, то жмем ctrl+enter - тэг добавляется в список. Если хотим продолжить поиск по тому что есть жмем enter. Я в поисках удобства для пользователей :) Просто в первом варианте это была целостная строка ввода, и было все очевидно, будет ли так же в этом варианте? Хотя пользователи будут студенты, особых проблем с пониманием возникнуть не должно |
Цитата:
input:focus { outline:none; } |
Часовой пояс GMT +3, время: 09:04. |