JQuery-Autocomplete-Plugin im Facebook-Stil [geschlossen]

Ich bin nach einem Plugin, um die automatische Vervollständigung durchzuführen, wie es Facebook tut, indem Sie mehrere Elemente auswählen können - ähnlich wie das Markieren einer Stackoverflow-Frage funktioniert.

Hier sind ein paar, denen ich begegnet bin:

• http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete
• http://www.emposha.com/javascript/fcbkcomplete.html
• https://github.com/loopj/jquery-tokeninput

Haben Sie eines davon ausprobiert? Waren sie einfach zu implementieren und anzupassen?

https://github.com/loopj/jquery-tokeninput

Ich habe es gerade ausprobiert und es war wirklich einfach, es mithilfe einer asp.net-Seite zu implementieren, um den JSON (über die Suchparameter) auszugeben. Dann gibt es nur ein paar Zeilen Javascript, die Sie zum Erstellen benötigen (und die Einstellungen).

$(document).ready(function() {
        $("#Users").tokenInput("../Services/Job/UnassignedUsers.aspx?p=<%= projectID %>&j=<%= jobID %>", {
        hintText: "Begin typing the user name of the person you wish to assign.",
        noResultsText: "No results",
        searchingText: "Searching..."
    });
});

Dieser sehr gut! https://github.com/wuyuntao/jquery-autosuggest/

Wie man es benutzt

Natürlich müssen Sie sicherstellen, dass die neueste jQuery-Bibliothek (mindestens 1.3) bereits auf Ihrer Seite geladen ist. Danach ist es ganz einfach: Fügen Sie Ihrer Seite einfach den folgenden Code hinzu (stellen Sie sicher, dass Sie Ihren Code in die Ready-Funktion von jQuery einschließen):

$(function(){
    $("input[type=text]").autoSuggest(data);
});

Die obige Codezeile wendet AutoSuggest auf alle Texttypelemente input auf der Seite an. Jeder verwendet denselben Datensatz. Wenn Sie mehrere AutoSuggest-Felder auf Ihrer Seite haben möchten, die unterschiedliche Datensätze verwenden, müssen Sie diese separat auswählen. So was:

$(function(){
    $("div.someClass input").autoSuggest(data);
    $("#someID input").autoSuggest(other_data);
});

Wenn Sie die oben genannten Schritte ausführen, können Sie verschiedene Optionen und verschiedene Datensätze übergeben. Unten finden Sie ein Beispiel für die Verwendung von AutoSuggest mit einem Datenobjekt und anderen verschiedenen Optionen:

var data = {items: [
    {value: "21", name: "Mick Jagger"},
    {value: "43", name: "Johnny Storm"},
    {value: "46", name: "Richard Hatch"},
    {value: "54", name: "Kelly Slater"},
    {value: "55", name: "Rudy Hamilton"},
    {value: "79", name: "Michael Jordan"}
]};
$("input[type=text]").autoSuggest(data.items, {selectedItemProp: "name", searchObjProps: "name"});

Folgendes habe ich in keiner bestimmten Reihenfolge gefunden:

• Selectize.js
• jQuery Tokeninput - GitHub
• Select2
• TextboxList
• Tag-it - GitHub
• TextExt
• FCBKcomplete - GitHub - Demo
• jQuery Facebook Autocomplete
• jquery-autosuggest - zogwilson Demo
• Kiefern Tags
• tagedit
• Tagit
• Eingabe von jQuery-Tags
• Stichworte
• jquery.token-field

Wenn Sie nach Funktionen für Benutzererwähnungen wie fb und tw suchen, ist dies ein gutes Plugin. http://podio.github.io/jquery-mentions-input/

Dies ist das ursprüngliche JQuery-Plugin für die automatische Vervollständigung, bevor es in JQueryUI integriert wurde. Wenn Sie nur JQuery, aber nicht die gesamte JQueryUI-Bibliothek bereitstellen möchten, verwenden Sie diese. Ich habe diesen in der Vergangenheit benutzt und war damit zufrieden.

http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete /

Ich habe diesen gefunden. Scheint robust, gepflegt und reagiert.

http://ivaynberg.github.io/select2/

Ich war ziemlich beeindruckt vom devbridge Autosuggest. Sehr anpassbar