JQuery-Plugin im Facebook-Stil zum automatischen Vervollständigen

Question

Im nach einem Plugin zu tun Autocomplete wie Facebook tut, dass Sie mehrere Elemente auswählen können - ähnlich wie Tagging eine Stackoverflow Frage funktioniert.

Hier sind ein paar, auf die ich gestoßen 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 dieser Produkte ausprobiert? Waren sie einfach zu implementieren und anzupassen?

Answer 1

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

Ich hatte gerade einen Versuch mit diesem, und es war wirklich einfach zu implementieren mit einem asp.net Seite zur Ausgabe der JSON (aus der Suche Parameter) Dann gibt es nur ein paar Zeilen Javascript, die Sie benötigen, um es zu erstellen (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..."
    });
});

Answer 2

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

Wie man es benutzt

Natürlich müssen Sie sicherstellen, dass Sie die neueste jQuery-Bibliothek (mindestens (mindestens 1.3) bereits in Ihrer Seite geladen haben. Danach ist es wirklich einfach, Fügen Sie einfach den folgenden Code in Ihre Seite ein (achten Sie darauf, dass Sie Ihren Code in die ready-Funktion von jQuery):

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

Die obige Codezeile wendet AutoSuggest auf alle Textarten an input Elemente auf der Seite. Jedes Element verwendet denselben Datensatz. Wenn Sie mehrere AutoSuggest-Felder auf Ihrer Seite haben möchten, die die unterschiedliche Datensätze verwenden, müssen Sie sie separat auswählen. Wie so:

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

Auf diese Weise können Sie verschiedene Optionen eingeben und verschiedene Datensätze. Unten ist 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"});

Answer 3

Das habe ich gefunden, in keiner bestimmten Reihenfolge:

• Selectize.js
• jQuery Tokeninput -- GitHub
• Auswählen2
• TextboxList
• Tag-it -- GitHub
• TextExt
• FCBKkomplett -- GitHub -- Demo
• jQuery Facebook Autocomplete
• jquery-autosuggest -- drewwilson demo
• Kiefern Tags
• tagedit
• Tagit
• jQuery Tags Eingabe
• Tags
• jquery.token-field

Answer 4

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

Answer 5

Dies ist das ursprüngliche JQuery Autocomplete-Plugin, bevor es in JQueryUI integriert wurde. Wenn Sie suchen, um nur JQuery, aber nicht die gesamte JQueryUI-Bibliothek zu dienen, verwenden Sie diese ein. Ich habe dieses Plugin in der Vergangenheit verwendet und war sehr zufrieden damit.

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