jQuery Autocomplete-Tagging-Plug-In wie die Eingabe-Tags von StackOverflow? [geschlossen]

522

Welche Lösungen erreichen dieselbe automatische Vervollständigung, die SO für die Eingabe von Tags verwendet?

Es gibt Plugins, die ein Wort verarbeiten können, aber ich habe keine gesehen, die mehrere Wörter verarbeiten können.

jquery autocomplete tags Joe Phillips
quelle
Abstimmung zum Schließen als Tool rec.
Ciro Santilli 30 冠状 病 六四 事件 30
1
Ich habe das beste erstellt - github.com/yairEO/tagify
vsync
@vsync In der ersten Antwort zur Liste hinzugefügt. Leider kann kein direkter Link zu codepen.io erstellt werden, da die Antwort keinen Code enthält
Joe Phillips,
@ JoePhilllips - vielleicht akzeptiert es Google URL verkürzte
vsync
@JoePhilllips - Mein Plugin ist besser als das beste ganz oben auf der Liste und verdient es, ganz oben zu stehen, und dafür habe ich gute Verkaufsargumente. Derzeit ist der oberste in der Liste aufgebläht (x4 als meiner), verwendet ein zusätzliches Eingabeelement (schlecht für die Formularserialisierung) und unterstützt keine Kommas oder das Einfügen von Tags mit diesen. Es bietet einige Funktionen, die nett sind, aber in den meisten Fällen nicht benötigt werden. autocompletesollte verzweifelt verwendet werden IMHO
vsync

Antworten:

763

In der Reihenfolge der Aktivität, der verfügbaren Demos / Beispiele und der Einfachheit:

Verbunden:

Dmitriy Nesteryuk
quelle
Auf IE9 gibt es "Zeile: 18 Fehler: Objekt unterstützt keine Eigenschaft oder Methode 'tagit'"
Raghav
2
Wer nach der aktuellsten Version, Dokumentation und ausführlicheren Beispielen für dieses erstaunliche Plugin sucht, sollte hier vorbeischauen
Crisman
1
Update: Ich denke, Magicsuggest ist jetzt die beste Option.
SSJ
8
tag-it ist überbewertet. Das Erfordernis von jquery für ein einfaches Tag-System ist zu viel, aber das Erfordernis von jQuery UI und jquery UI CSS ist heutzutage einfach verrückt. Ist es nicht wert.
Alvaro
1
@scniro Am Ende habe ich jquery.tagsinput verwendet, weil es mir nichts ausmacht, jQuery zu verwenden, das bereits in meinem Projekt verwendet wird. Ich dachte nur, es wäre verrückt, nach jquery UI und CSS zu fragen.
Alvaro
62

Bootstrap: Wenn Sie Bootstrap verwenden. Das ist wirklich gut: Select2

Auch TokenInput ist interessant. Erstens hängt es nicht von der jQuery-Benutzeroberfläche ab, zweitens ist die Konfiguration sehr flüssig.

Das einzige Problem, das ich hatte, unterstützt natives Free-Tagging nicht. Daher muss ich die Abfragezeichenfolge als Teil der Antwort-JSON an den Client zurückgeben.

Wie @culithay im Kommentar erwähnt, unterstützt TokenInput viele Funktionen zum Anpassen. Und Highlight einiger Funktionen, die die anderen nicht haben:

  • tokenLimit: Die maximale Anzahl von Ergebnissen, die vom Benutzer ausgewählt werden dürfen. Verwenden Sie null, um eine unbegrenzte Auswahl zuzulassen
  • minChars: Die Mindestanzahl von Zeichen, die der Benutzer eingeben muss, bevor eine Suche durchgeführt wird.
  • queryParam: Der Name des Abfrageparameters, von dem Sie erwarten, dass er den Suchbegriff auf der Serverseite enthält

Danke culithay für die Eingabe.

Nishant
quelle
3
TokenInput scheint genau das zu sein, wonach ich gesucht habe: Der Benutzer gibt einige Dinge ein, führt eine Suche auf dem Server durch, der Benutzer kann ein gesuchtes Element auswählen, spülen und wiederholen.
Mala
1
TokenInput unterstützt viele Funktionen zum Anpassen. Und ich hebe einige Funktionen hervor, die die anderen nicht haben. - tokenLimit: Die maximale Anzahl von Ergebnissen, die vom Benutzer ausgewählt werden dürfen. Verwenden Sie null, um eine unbegrenzte Auswahl zuzulassen - minChars: Die Mindestanzahl von Zeichen, die der Benutzer eingeben muss, bevor eine Suche durchgeführt wird. - queryParam: Der Name des Abfrageparameters, von dem Sie erwarten, dass er den Suchbegriff auf der Serverseite enthält
am
1
@culithay zur Antwort hinzugefügt
Nishant
So fügen Sie neue kostenlose Tags hinzu: stackoverflow.com/questions/28656977/… Hard :-(
Ciro Santilli 31 冠状 病 六四 事件 31
Gut. Free-Tagging nicht zu unterstützen ist kein großes Problem, da es leicht überwunden werden kann.
RationalRabbit
9

Dies beantwortete ursprünglich eine ergänzende Frage zur Weisheit des Herunterladens von jQuery im Vergleich zum Zugriff über ein nicht mehr vorhandenes CDN ...

Um die Sache mit Google zu beantworten. Ich bin zum Zugriff auf JQuery und die meisten anderen Bibliotheken dieser Art über das entsprechende CDN auf meinen Websites übergegangen.

Wenn mehr Leute dies tun, bedeutet dies, dass es wahrscheinlicher ist, dass es auf den Computern des Benutzers zwischengespeichert wird. Meine Stimme ist also eine gute Idee.

In den fünf Jahren, seit ich dies zum ersten Mal angeboten habe, ist es allgemein bekannt geworden.

julianisch
quelle
3
Wir führen dies auch als Teil unserer Standardvorlagen ein. Google kann diesen Code gezippt und aus einem CDN schneller als wir bereitstellen. Wenn die Wahrscheinlichkeit, dass ein Besucher diesen Cache zwischengespeichert hat, sogar 2% beträgt, ist dies besser als gar keine Chance.
Tom
27
Wie ist das die Antwort auf die ursprüngliche Frage?
Derek
3
Im letzten Teil "Auch ..." wird gefragt, ob das Verknüpfen mit der Google-Version eine gute oder eine schlechte Idee ist, und meine Antwort lautet, dass es sich um eine zunehmend gute Idee handelt.
Julian
@Derek Ich glaube nicht, dass ich andere akzeptable Antworten hatte, als ich sie ursprünglich fragte. Das hat sich seitdem geändert.
Joe Phillips
1

Wir haben gerade dieses JQuery-Plug-In Github als Open-Source-Version bereitgestellt : taktivos / jquery-sew .

user1880508
quelle
1
Während dieser Link die Frage beantworten kann, ist es besser, die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz bereitzustellen. Nur-Link-Antworten können ungültig werden (und herabgestuft werden), wenn sich die verknüpfte Seite ändert. Lesen Sie, wie Sie antworten, warum dies wichtig ist.
Bytebuster
3
Die Demoseite ist tot.
Edward Olamisan