Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Автоподсказка для тэгов (https://javascript.ru/forum/dom-window/18012-avtopodskazka-dlya-tehgov.html)

Kein 13.06.2011 00:20

Автоподсказка для тэгов
 
Хочу сделать добавление тэгов, проще объяснить на картинке:

При печатании, выскакивает автоподсказка, со списком тэгов. Если выбрать тэг из автокомплита или поставить разделитель(запятую к примеру) то тэг превратится в кнопочку(на рисунке два тэга-кнопки index и ipo).
Знаю что есть готовый autocomplete для jquery. Есть ли что-то готовое, что еще поможет мне в этой задаче?

Если нет, то оцените, правильно ли я решаю задачу.
Сейчас то что на картинке, это большой input, по верх него с асболютным позиционирование ul-список.
Каждый раз при когда мы выбираем из автоподсказки, или ставим запятую, в этот список добавляется новый тэг, а padding у input'а увеличивается на ширину ul, а текст удаляется. На рисунке в input'е value == 'еще тэг'.

С другой стороны мне приходится настоящее значение со списком тэгов забивать в спрятанный input. Хотя я не думаю что будут посетители с отключенным яваскриптом, и для поисковика не важен этот сайт.

К сожалению я еще это не сделал, вот только обдумываю как лучше будет) Есть какие-то замечания? У меня опыта в JS не много)

Aetae 13.06.2011 00:59

Имхо, будет неудобно юзеру, убегающее от взгляда поле для ввода не самый приятный вариант как не крути.
Надо не так:
[index] [ipo] блабла
а так:
блабла [index] [ipo]

Добавление тупо по enter'у.

И реализация сразу упрощается.))

Kein 13.06.2011 01:03

Да действительно так удобнее :) А как в таком случае рассчитать отступ для списка с кнопками-тэгами ?

То есть input будет небольшой длинны? Дело в том что хром подсвечивает input желтой рамкой, и я не знаю как от нее избавится, если делать input небольшим, то это будет видно

Aetae 13.06.2011 01:07

А зачем?
input, а за ним список.
Минимальная ширина input'а фиксированная, если становится короток - увеличивается, автоматом сдвигая список.
Как-то так. Можно ещё всяких свистелок-перделок наворотить с анимацией. Главное чтоб не в ущерб скорости ввода.

Kein 13.06.2011 01:16

То есть на деле будет так:
вводим тэг, выбираем по автокомплиту, далее:
если хотим вести поиск по мультитэгам, то жмем ctrl+enter - тэг добавляется в список.
Если хотим продолжить поиск по тому что есть жмем enter.

Я в поисках удобства для пользователей :) Просто в первом варианте это была целостная строка ввода, и было все очевидно, будет ли так же в этом варианте?
Хотя пользователи будут студенты, особых проблем с пониманием возникнуть не должно

walik 13.06.2011 09:31

Цитата:

Сообщение от Kein
Дело в том что хром подсвечивает input желтой рамкой, и я не знаю как от нее избавится

input:focus {
	outline:none; 
}


Часовой пояс GMT +3, время: 07:13.