jQuery wtyczka tagowania autouzupełniania jak tagi wejściowe StackOverflow? [Zamknięte]

522

Jakie rozwiązania zapewniają to samo automatyczne uzupełnianie, którego używa SO do wprowadzania tagów?

Istnieją wtyczki, które mogą obsługiwać jedno słowo, ale nie widziałem żadnego, który obsługuje wiele słów.

jquery autocomplete tags

— Joe Phillips
źródło

Głosowanie w celu zamknięcia jako narzędzie rec.

— Ciro Santilli 30 冠状病六四事件法轮功

1

Stworzyłem najlepszy - github.com/yairEO/tagify

— vsync,

@vsync Dodał go do listy w pierwszej odpowiedzi. Niestety nie można połączyć bezpośrednio z codepen.io z powodu braku kodu w odpowiedzi

— Joe Phillips,

@JoePhilllips - być może przyjmie skrócone adresy URL Google

— vsync

@JoePhilllips - Moja wtyczka jest lepsza niż najlepsza na górze listy i zasługuje na to, aby być na szczycie i mam na to dobre punkty sprzedaży. obecnie najwyższy na liście jest nadęty (x4 niż mój), używa dodatkowego elementu wejściowego (zły w przypadku serializacji formularza) i nie obsługuje przecinków ani wklejania tagów. oferuje pewne funkcje, które są ładne, ale niepotrzebne w większości przypadków. autocompletepowinien być używany desperacko IMHO

— vsync 13.10.16

763

W kolejności działania dostępne dema / przykłady i prostota:

( demo ) https://github.com/yairEO/tagify
( demo ) https://github.com/aehlke/tag-it
( demo ) http://ioncache.github.com/Tag-Handler/
( demo ) http://textextjs.com/
( demo ) https://github.com/webworka/Tagedit
( demo ) https://github.com/documentcloud/visualsearch/
( demo ) http://harvesthq.github.io/chosen/ (tak naprawdę nie jest to wtyczka do tagowania)
(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

Związane z:

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

— Dmitriy Nesteryuk
źródło

W IE9 wyświetla komunikat „Błąd linii: 18: Obiekt nie obsługuje właściwości ani metody„ tagit ””

— Raghav

2

Każdy, kto szuka najbardziej aktualnej wersji, dokumentacji i obszerniejszych przykładów tej niesamowitej wtyczki, powinien przejść tutaj i odszukać

— Crisman

1

aktualizacja: myślę, że magicsuggest jest teraz najlepszą opcją.

— ssj

8

tag-jest przereklamowany. Wymaganie jquery dla prostego systemu tagów jest zbyt duże, ale wymaganie również jQuery UI i jquery UI CSS jest po prostu szalone. Nie jest tego warte.

— Alvaro

1

@scniro Skończyło się na użyciu jquery.tagsinput, ponieważ nie mam nic przeciwko użyciu jQuery, który jest już używany w moim projekcie. Pomyślałem, że szaleństwem jest poprosić o jquery UI i CSS.

— Alvaro,

62

Bootstrap: Jeśli używasz Bootstrap. To jest naprawdę dobre: Select2

Również TokenInput jest interesujący. Po pierwsze, nie zależy od jQuery-UI, po drugie jego konfiguracja jest bardzo płynna.

Jedyny problem, jaki miałem, nie obsługuje natywnego tagowania. Tak więc muszę zwrócić ciąg zapytania z powrotem do klienta w ramach odpowiedzi JSON.

Jak wspomniano w komentarzu @culithay, TokenInput obsługuje wiele funkcji dostosowywania. Podkreśl niektóre funkcje, których inne nie mają:

tokenLimit: maksymalna liczba wyników dozwolona przez użytkownika. Użyj null, aby zezwolić na nieograniczone możliwości wyboru
minChars: minimalna liczba znaków, które użytkownik musi wprowadzić przed rozpoczęciem wyszukiwania.
queryParam: nazwa parametru zapytania, który ma zawierać wyszukiwany termin po stronie serwera

Dziękuję za wkład.

— Nishant
źródło

3

TokenInput wygląda dokładnie tak, jak tego szukałem: użytkownik wpisuje coś, wykonuje wyszukiwanie na serwerze, użytkownik może wybrać szukany element, spłukać i powtórzyć.

— Mala

1

TokenInput obsługuje wiele funkcji, które można dostosować. Podkreślam niektóre funkcje, których inni nie mają. - tokenLimit: maksymalna liczba wyników dozwolona przez użytkownika. Użyj null, aby zezwolić na nieograniczone możliwości wyboru - minChars: minimalna liczba znaków, którą użytkownik musi wprowadzić przed rozpoczęciem wyszukiwania. - queryParam: nazwa parametru zapytania, który ma zawierać wyszukiwany termin po stronie serwera

— dniu

1

@culithay dodał do odpowiedzi

— Nishant

Jak dodać nowe darmowe tagi: stackoverflow.com/questions/28656977/... Hard :-(

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

Dobry. Brak obsługi bezpłatnego tagowania nie jest dużym problemem, ponieważ można go łatwo rozwiązać.

— RationalRabbit

9

To pierwotnie stanowiło odpowiedź na dodatkowe pytanie dotyczące mądrości pobierania jQuery w porównaniu z dostępem do niego przez CDN, który już nie jest obecny ...

Aby odpowiedzieć na pytanie o Google. Przeszedłem do uzyskiwania dostępu do JQuery i większości innych tego rodzaju bibliotek za pośrednictwem odpowiedniego CDN na moich stronach.

Im więcej osób to robi, tym bardziej prawdopodobne jest, że będzie ono buforowane na komputerach użytkowników, więc mój głos jest dobry.

W ciągu pięciu lat, które po raz pierwszy zaoferowałem, stało się to powszechną mądrością.

— juliański
źródło

3

Rozwijamy to również jako część naszych domyślnych szablonów. Google może udostępniać ten kod spakowany i wychodzić z CDN szybciej niż my, a jeśli nawet istnieje 2% szansy na to, że użytkownik ma ten bufor, to jest lepsze niż brak szansy.

— Tom

27

Jak to jest odpowiedź na pierwotne pytanie?

— Derek

3

Ostatnia część „Ponadto…” dotyczy tego, czy linkowanie do wersji Google jest dobrym czy złym pomysłem, a moja odpowiedź brzmi: jest to coraz lepszy pomysł.

— Julian

@Derek Nie sądzę, że miałem inne akceptowalne odpowiedzi, kiedy pierwotnie o to pytałem. Od tego czasu to się zmieniło.

— Joe Phillips

5

Kolejna doskonała wtyczka: http://documentcloud.github.com/visualsearch/

— Mrchief
źródło

3

Sprawdź tę wtyczkę:

Jak korzystać z AJAX do ładowania tagów https://stackoverflow.com/a/7662534/1078027

— boreq
źródło

1

Właśnie otworzyliśmy tę wtyczkę jquery Github: tactivos / jquery-sew .

— użytkownik1880508
źródło

1

Chociaż ten link może odpowiedzieć na pytanie, lepiej dołączyć tutaj istotne części odpowiedzi i podać link w celach informacyjnych. Odpowiedzi zawierające tylko łącze mogą stać się nieprawidłowe (i negatywnie ocenione), jeśli zmieni się połączona strona. Zobacz, jak odpowiedzieć, dlaczego jest to ważne.

— bytebuster

3

Strona demonstracyjna nie działa.

— Edward Olamisan,