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

Question 1

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

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

Question 2

Голосование, чтобы закрыть как инструмент рек.

Question 3

Я создал лучшее - github.com/yairEO/tagify

Question 4

@vsync Добавил его в список при первом ответе. К сожалению, не могу напрямую связаться с codepen.io из-за отсутствия кода в ответе

Question 5

@JoePhilllips - возможно, он примет укороченные URL Google

Question 6

@JoePhilllips - Мой плагин лучше, чем лучший в верхней части списка, и заслуживает того, чтобы быть на вершине, и у меня есть хорошие пункты продажи за это. в настоящее время верхний в списке раздутый (в 4 раза больше моего), использует дополнительный элемент ввода (плохо для сериализации формы) и не поддерживает запятые или вставку тегов с ними. он предлагает некоторые функции, которые хороши, но в большинстве случаев не нужны. autocomplete надо использовать отчаянно ИМХО

Question 7

@vsync, у тебя всего несколько дней. Я немного реорганизовал список, чтобы почтить те, которые все еще доступны, недавно обновлены, сфокусированы и упомянуты. Ваш сделал это # 4

Question 8

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

Question 9

В порядке активности, доступных демо/примеров и простоты:

(демонстрация) https://github.com/xoxco/jQuery-Tags-Input
(демонстрация) http://nicolasbize.com/magicsuggest/
(демонстрация) https://github.com/aehlke/tag-it
(demo) https://github.com/yairEO/tagify
(демонстрация) http://ioncache.github.com/Tag-Handler/
(демонстрация) http://textextjs.com/
(демонстрация) https://github.com/webworka/Tagedit
(demo) https://github.com/documentcloud/visualsearch/
(demo) http://harvesthq.github.io/chosen/ (это isn 't действительно плагин для тегов
(demo?) http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
(demo?) http://jcesar.artelogico.com/jquery-tagselector/
(demo?) http://remysharp.com/wp-content/uploads/2007/12/tagging.php
(demo?) http://pietschsoft.com/post/2011/09/09/Tag-Editor-Field-using-jQuery-similar-to-StackOverflow.aspx

по теме:

https://meta.stackexchange.com/questions/100669/feedback-wanted-improved-tag-editor

Question 10

Очень хороший плагин. Спасибо, что поделились!

Question 11

В IE9 он выдает «Строка: 18 Ошибка: объект не поддерживает свойство или метод tagit»

Question 12

@ raghav-khunger в IE ключевое слово "const" не поддерживается для JavaScript, но ошибка. Проверьте эту ссылку

Question 13

Любой, кто ищет самую последнюю версию, документацию и более обширные примеры этого удивительного плагина, должен пойти сюда и раскошелиться: github.com/aehlke/tag-it

Question 14

В силу власти, предоставленной мне, я объявляю tag-it как самый простой, но самый эффективный плагин из когда-либо созданных.

Question 15

Голосуй за теги и это хороший список. Спасибо

Question 16

Мы только что выпустили Bootstrap Tokenfield. Основное внимание уделяется копированию-вставке, поддержке клавиатуры и редактированию. sliptree.github.io/bootstrap-tokenfield

Question 17

Любой, кто может порекомендовать хороший с нокаутом. JS?

Question 18

Вот еще один хороший пример : brianreavis.github.io/selectize.js Я бы добавил его в качестве ответа, но это было бы явно "неконструктивно".

Question 19

Tag-это очень хорошо для интеграции автозаполнения JQuery.

Question 20

selectize.js 6500+ звезд на github. стоит проверить. brianreavis.github.io/selectize.js

Question 21

Я ищу один с функцией автозаполнения, и мы можем отключить проверку дубликатов, какой из них хорошо? У некоторых из них всегда есть проверка дубликатов, но отключить эту функцию невозможно.

Question 22

обновление: я думаю, что magicsuggest - лучший вариант сейчас.

Question 23

Ваша вторая ссылка не работает.

Question 24

@Felipe Schenone Tag-It хорошо, но у меня есть проблема , когда я хочу , чтобы отправить выбранные тег ID с помощью формы, пользователи сталкиваются с таким же вопросом здесь , я хочу , чтобы установить теги идентификаторы в скрытом поле и использовать его в дальнейшем в течение поста, Любое хорошее решение или другой плагин?

Question 25

тег - это переоценено. Требовать jquery для простой системы тегов - это слишком много, но требовать также jQuery UI и jquery UI CSS просто безумие в наши дни. Не стоит того.

Question 26

@ Alvaro полностью согласен, поэтому без ума от deps абсолютно не будет использовать tag-it. Удалось ли найти похожий в ванили?

Question 27

@scniro Я закончил тем, что использовал jquery.tagsinput, потому что я не против использовать jQuery, который уже используется в моем проекте. Я просто сумасшедший, чтобы спросить JQuery UI и CSS.

Question 28

Tag-It имеет проблемы, особенно при изменении доступа для чтения-записи (динамически, на стороне клиента).

Question 29

По какой-то причине я не могу использовать jQuery, есть ли какое-то решение только css / js?

Question 30

Select2 был намного лучшим вариантом для меня. Попробуйте, прежде чем tag-it

Question 31

как насчет этой библиотеки github.com/sniperwolf/taggingJS ? Это лучше, чем вышеупомянутые библиотеки?

Question 32

Я очень люблю tagify. Кажется, это самый легкий и простой в настройке. Единственное, что мне не нравится в этом, это странная разметка.

Question 33

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

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

Единственная проблема, с которой я столкнулся, не поддерживает бесплатную маркировку. Итак, я должен вернуть строку запроса обратно клиенту как часть ответа JSON.

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

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

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

Question 34

Это действительно отличная альтернатива!

Question 35

TokenInput выглядит хорошо и просто

Question 36

TokenInput выглядит так, как будто я искал: пользователь вводит некоторые данные, выполняет поиск на сервере, пользователь может выбрать искомый элемент, промыть и повторить.

Question 37

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

Question 38

@culithay добавил к ответу

Question 39

Как добавить новые бесплатные теги с ним: stackoverflow.com/questions/28656977/… Hard :-(

Question 40

Неплохо. Не поддержка свободных тегов не является большой проблемой, так как ее легко можно преодолеть.

Question 41

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

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

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

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

Question 42

Мы также внедряем это как часть наших стандартных шаблонов. Google может предоставить этот код в заархивированном виде из CDN быстрее, чем мы, плюс если даже есть 2% -ная вероятность того, что посетитель кэширует это, это лучше, чем вообще никаких шансов.

Question 43

+1 для загрузки Google.

Question 44

Как это ответ на оригинальный вопрос?

Question 45

В последней части «Кроме того ...» спрашивается, является ли ссылка на версию Google хорошей или плохой идеей, и я отвечаю, что это все более хорошая идея.

Question 46

@Derek Я не думаю, что у меня были другие приемлемые ответы, когда я первоначально спросил это. Это с тех пор изменилось.

Question 47

Еще один отличный плагин: http://documentcloud.github.com/visualsearch/

Question 48

Этот плагин:

(источник) https://github.com/aehlke/tag-it
(базовая демонстрация) http://aehlke.github.com/tag-it
(еще примеры) http://aehlke.github.com/tag-it/examples.html

как использовать AJAX для загрузки тегов https://stackoverflow.com/questions/6938802/trying-to-get-tag-it-to-work-with-an-ajax-call

Question 49

Мы просто открываем этот подключаемый модуль jquery https://github.com/tactivos/jquery-sew

Question 50

Хотя эта ссылка может ответить на вопрос, лучше включить здесь основные части ответа и предоставить ссылку для справки. Ответы, содержащие только ссылки, могут стать недействительными (и потерять голос), если связанная страница изменится. См. Как ответить, почему это важно.

Question 51

Демо-страница мертва.

Dmitriy Nesteryuk · Accepted Answer · 2010-04-20T11-36-00.000Z

709

Лучший ответ