jQuery плагин для автозаполнения тегов, как входные теги StackOverflow? [закрыто]

523

Какие решения выполняют такое же автоматическое заполнение, которое SO использует для ввода тегов?

Есть плагины, которые могут обрабатывать одно слово, но я не видел ни одного, который обрабатывает несколько слов.

jquery autocomplete tags Джо Филлипс
источник
Голосование, чтобы закрыть как инструмент рек.
Сиро Сантилли 郝海东 冠状 病 六四 事件 法轮功
1
Я создал лучшее - github.com/yairEO/tagify
vsync
@vsync Добавил его в список при первом ответе. К сожалению, не могу связать напрямую с codepen.io из-за отсутствия кода в ответе
Джо Филлипс
@JoePhilllips - может быть, он примет укороченные URL Google
vsync
@JoePhilllips - Мой плагин лучше, чем лучший в верхней части списка, и заслуживает того, чтобы быть на вершине, и у меня есть хорошие пункты продажи за это. в настоящее время самый верхний в списке раздутый (в 4 раза больше моего), использует дополнительный элемент ввода (плохо для сериализации формы) и не поддерживает запятые или вставку тегов с ними. он предлагает некоторые функции, которые хороши, но не нужны в большинстве случаев. autocompleteнадо отчаянно использовать ИМХО
vsync

Ответы:

763

Порядок действий, доступные демонстрационные примеры и простота:

Связанные с:

Дмитрий Нестерюк
источник
В IE9 он выдает «Ошибка строки 18: объект не поддерживает свойство или метод tagit»
Raghav
2
Любой, кто ищет самую последнюю версию, документацию и более обширные примеры этого удивительного плагина, должен пойти сюда и
раскошелиться
1
обновление: я думаю, что magicsuggest - лучший вариант сейчас.
ssj
8
тег - это переоценено. Требовать jquery для простой системы тегов - это слишком много, но требовать также jQuery UI и jquery UI CSS просто безумие в наши дни. Не стоит того.
Альваро
1
@scniro Я закончил тем, что использовал jquery.tagsinput, потому что я не против использовать jQuery, который уже используется в моем проекте. Я просто подумал, что это было сумасшествие - просить jquery UI и CSS.
Альваро
62

Bootstrap: если вы используете Bootstrap. Это действительно хороший вариант : Select2

Также TokenInput интересен. Во-первых, это не зависит от jQuery-UI, во-вторых, его конфигурация очень плавная.

Единственная проблема, которая у меня возникла, - это не поддержка свободных тегов. Итак, я должен вернуть строку запроса обратно клиенту как часть ответа JSON.

Как отметил @culithay в комментарии, TokenInput поддерживает множество функций для настройки. И выделите некоторые функции, которых нет у других:

  • tokenLimit: максимальное количество результатов, которое может выбрать пользователь. Используйте ноль, чтобы разрешить неограниченный выбор
  • minChars: минимальное количество символов, которое пользователь должен ввести перед выполнением поиска.
  • queryParam: имя параметра запроса, который, как вы ожидаете, будет содержать критерий поиска на стороне сервера

Спасибо culithay за вклад.

Nishant
источник
3
TokenInput выглядит так, как будто я искал: пользователь вводит некоторые данные, выполняет поиск на сервере, пользователь может выбрать искомый элемент, промыть и повторить.
Мала
1
TokenInput поддерживает множество функций для настройки. И я выделяю некоторые особенности, которых нет у других. - tokenLimit: максимальное количество результатов, которое может выбрать пользователь. Используйте null, чтобы разрешить неограниченный выбор - minChars: минимальное количество символов, которое пользователь должен ввести перед выполнением поиска. - queryParam: имя параметра запроса, который, как вы ожидаете, будет содержать поисковый запрос на стороне сервера
culitay 22.10.14
1
@culithay добавил к ответу
Nishant
Как добавить новые бесплатные теги с ним: stackoverflow.com/questions/28656977/… Hard :-(
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
Неплохо. Отказ от поддержки бесплатных тегов не является большой проблемой, поскольку ее легко можно преодолеть.
RationalRabbit
9

Первоначально он ответил на дополнительный вопрос о целесообразности загрузки jQuery по сравнению с доступом к нему через CDN, которого больше нет ...

Чтобы ответить на вопрос о Google. Я перешел к доступу к JQuery и большинству других подобных библиотек через соответствующие CDN на моих сайтах.

Чем больше людей делает это, тем больше вероятность, что он будет кэшироваться на компьютерах пользователей, поэтому мой голос идет за хорошую идею.

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

юлианский
источник
3
Мы внедряем это как часть наших стандартных шаблонов. Google может предоставить этот код в заархивированном виде и из CDN быстрее, чем у нас, плюс, если есть даже 2% -ная вероятность того, что посетитель имеет этот кеш, это лучше, чем вообще никаких шансов.
Том
27
Как это ответ на оригинальный вопрос?
Дерек
3
В последней части «Кроме того ...» спрашивается, является ли ссылка на версию Google хорошей или плохой идеей, и я отвечаю, что это все более хорошая идея.
Джулиан
@Derek Я не думаю, что у меня были какие-либо другие приемлемые ответы, когда я первоначально спросил это. Это с тех пор изменилось.
Джо Филлипс
1

Мы только что открыли этот плагин для jquery Github: tactivos / jquery-sew .

user1880508
источник
1
Хотя эта ссылка может ответить на вопрос, лучше включить сюда основные части ответа и предоставить ссылку для справки. Ответы, содержащие только ссылки, могут стать недействительными (и потерять голос), если связанная страница изменится. Посмотрите, как ответить, почему это важно.
bytebuster
3
Демо-страница мертва.
Эдвард Оламисан