jQuery плагін для автоматичного заповнення тегів, як теги вводу StackOverflow? [зачинено]

522

Які рішення забезпечують те саме автоматичне завершення, яке використовує SO для введення тегів?

Є плагіни, які можуть обробляти одне слово, але я не бачив жодного, який би обробляв кілька слів.

jquery autocomplete tags

— Джо Філіпс
джерело

Голосування про закриття, як відтворення інструменту.

— Ciro Santilli 郝海东冠状病六四事件法轮功

1

Я створив найкраще - github.com/yairEO/tagify

— vsync

@vsync Додав його до списку у першій відповіді. На жаль, не можна зв’язатися безпосередньо з codepen.io через відсутність у відповіді коду

— Джо Філіпс

@JoePhilllips - можливо, він сприйме скорочені URL-адреси google

— vsync

@JoePhilllips - Мій плагін кращий, ніж найкращий у верхній частині списку, і заслуговує на те, щоб бути в топі, і у мене є хороші точки продажу за це. на даний момент верхній у списку роздутий (x4, ніж мій), використовує додатковий вхідний елемент (погано для серіалізації форми) і не підтримує комами чи вставлення тегів з ними. він пропонує деякі функції, які є приємними, але непотрібними для більшості випадків. autocompleteслід відчайдушно використовувати IMHO

— vsync

763

За порядком діяльності, доступними демонстраційними прикладами та простотою:

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

Пов'язані:

/meta/100669/feedback-wanted-improved-tag-editor

— Дмитро Нестерюк
джерело

В IE9 він дає "Рядок: 18 Помилка: Об'єкт не підтримує властивість або метод" tagit ""

— Raghav

2

Усі, хто шукає найновішу версію, документацію та більш масштабні приклади цього дивовижного плагіна, повинні зайти сюди та роз’їхатись

— Crisman

1

update: Я думаю, що magicsuggest - це найкращий варіант зараз.

— ssj

8

тег-це завищена. Вимагати jquery для простої системи тегів занадто багато, але вимагати також jQuery UI та jquery UI CSS просто шалено сьогодні. Не варто.

— Альваро

1

@scniro Я в кінцевому підсумку використовував jquery.tagsinput, тому що не проти використовувати jQuery, який вже використовується в моєму проекті. Мені просто хоч було божевільно просити інтерфейс jquery та інтерфейс CSS.

— Альваро

62

Bootstrap: Якщо ви використовуєте Bootstrap. Це дійсно добре: Select2

Також TokenInput цікавий. По-перше, це не залежить від jQuery-UI, по-друге, його конфігурація дуже гладка.

Єдине питання, яке у мене було, не підтримує вільне позначення тегом. Отже, я повинен повернути рядок запиту назад клієнту як частина відповіді JSON.

Як згадується в коментарі @culithay, TokenInput підтримує безліч функцій для налаштування. І виділіть деякі функції, яких немає в інших:

tokenLimit: Максимальна кількість результатів, дозволених користувачем. Використовуйте null, щоб дозволити необмежений вибір
minChars: Мінімальна кількість символів, які користувач повинен ввести до початку пошуку.
queryParam: назва парами запиту, який, як очікується, містить пошуковий термін на стороні сервера

Дякую ви, що ви працювали за вклад.

— Нішант
джерело

3

TokenInput виглядає так, що це саме те, що я шукав: користувач вводить деякі речі, виконує пошук на сервері, користувач може вибрати шуканий елемент, промити та повторити.

— Мала

1

TokenInput підтримує безліч функцій для налаштування. І я підкреслюю деякі особливості, яких немає в інших. - tokenLimit: максимальна кількість результатів, дозволених користувачем. Використовуйте null, щоб дозволити необмежений вибір - minChars: Мінімальна кількість символів, які користувач повинен ввести до початку пошуку. - queryParam: назва парами запиту, який, як ви очікуєте, буде містити пошуковий термін на стороні сервера

— culithay

1

@culithay додав до відповіді

— Nishant

Як додати нові безкоштовні теги за допомогою нього: stackoverflow.com/questions/28656977/… Важко :-(

— Ciro Santilli 郝海东冠状病六四事件法轮功

Хороший. Непідтримка вільного тегування не є великою проблемою, оскільки його можна легко подолати.

— RationalRabbit

9

Це спочатку відповіло на додаткове запитання про розумність завантаження jQuery та доступу до нього через CDN, якого більше немає ...

Щоб відповісти на питання Google. Я перейшов до доступу до JQuery та більшості інших таких бібліотек через відповідний CDN на своїх сайтах.

Оскільки більше людей це робить, це означає, що це швидше кешування на машинах користувача, тому мій голос іде за гарну ідею.

За п’ять років, як я вперше запропонував це, це стало загальною мудрістю.

— Джуліан
джерело

3

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

— Том

27

Як це відповідь на початкове запитання?

— Дерек

3

Остання частина "Також ..." запитує, чи є посилання на версію Google доброю чи поганою ідеєю, і моя відповідь полягає в тому, що це все більш гарна ідея.

— Джуліан

@Derek Я не думаю, що у мене були інші прийнятні відповіді, коли я спочатку це задавав. Це з тих пір змінилося.

— Джо Філіпс

5

Ще один чудовий плагін: http://documentcloud.github.com/visualsearch/

— Mrchief
джерело

3

Перевірте цей плагін:

Як використовувати AJAX для завантаження тегів https://stackoverflow.com/a/7662534/1078027

— boreq
джерело

1

Ми просто відкрили цей плагін jquery Github: tactivos / jquery-sew .

— користувач1880508
джерело

1

Хоча це посилання може відповісти на питання, краще включити сюди суттєві частини відповіді та надати посилання для довідки. Відповіді, що стосуються лише посилань, можуть стати недійсними (або зворотними), якщо змінена пов’язана сторінка. Дивіться, як відповісти, чому це важливо.

— bytebuster

3

Демонстраційна сторінка мертва.

— Едвард Оламісан