Hinzufügen von Werten zu jQuery autocomplete Echtzeit

Mache ich ein "token-input" - Stil " mit einer AutoVervollständigen - (Benutzer schreibt etwas, wählt eine Antwort, die fügt einen "token", um die DOM-Ansicht).

Mithilfe von jQuery-autocomplete, gibt es eine Möglichkeit, das hinzufügen von Werten, die nicht in den source Liste nach dem Benutzer-Typen, die Sie in?

Beispielsweise eine Quelle sieht aus wie ["Apples", "Oranges", "Bananas"]. Der Benutzer Typen in "plums," bei der Verwendung des text-Feld. Gibt es einen Weg, um hinzuzufügen, "Pflaumen", um die Liste der Quellen, wenn der Benutzer dies wünscht? Ich weiß, es gibt select und change Veranstaltungen, die ich überprüfen kann, aber select funktioniert nur, wenn es auch etwas zu wählen (gibt es nicht in diesem Fall), und change würde erfordern irgendeine Art von timeout-check, um zu überprüfen, dass der Benutzer aufgehört hatte zu Tippen.

Umgekehrt, gibt es ein anderes plugin, das ich nutzen könnte um dieses Verhalten zu erreichen?

Konnte Sie nicht verwenden, das keyup-Ereignis?
change sollte hier arbeiten. Es enthält einen timeout, nachdem der Mensch aufgehört hat, eingeben und navigiert vom Spielfeld entfernt. Welche Probleme hast du-Begegnung, wenn Sie versuchen, es zu benutzen?

InformationsquelleAutor Kevin Whitaker | 2012-06-11

10

Dies sollte funktionieren mit autocomplete's change-Ereignis. Dieser code setzt Voraus gibt es eine Schaltfläche mit der id add wird angezeigt, wenn Sie hinzufügen möchten ein neues Element in der Liste. Es wird nicht angezeigt, wenn der Benutzer wählt ein Element aus der Liste. Es gibt einige Verbesserungen, die gemacht werden können, aber diese proof-of-concept sollte es möglich machen:
```
var source = ["Apples", "Oranges", "Bananas"];

$(function () {
    $("#auto").autocomplete({
        source: function (request, response) {
            response($.ui.autocomplete.filter(source, request.term));
        },
        change: function (event, ui) {
            $("#add").toggle(!ui.item);
        }
    });

    $("#add").on("click", function () {
        source.push($("#auto").val());
        $(this).hide();
    });
});
```
Hier ein Beispiel: http://jsfiddle.net/rmGqB/

Update: Klingt wie ich etwas falsch verstanden, die Voraussetzung. Sie können auch auf in der Folge, dass AutoVervollständigen bevölkern die Kandidatenliste mit und fahren die Sichtbarkeit der Schaltfläche basierend auf, ob oder nicht die Ergebnisse die Suche ergab keine genauen Treffer:
```
var source = ["Apples", "Oranges", "Bananas"];

$(function () {
    $("#auto").autocomplete({
        source: function (request, response) {
            var result = $.ui.autocomplete.filter(source, request.term);

            $("#add").toggle($.inArray(request.term, result) < 0);

            response(result);
        }
    });

    $("#add").on("click", function () {
        source.push($("#auto").val());
        $(this).hide();
    });
});
```
Beispiel: http://jsfiddle.net/VLLuJ/
- Nicht mit der change Veranstaltung benötigen, das Feld zu verwischen? Meine Sorge ist, dass, wenn der Benutzer einen neuen Wert, es werden keine Suchergebnisse zurückgegeben (verhält sich wie ein normales Textfeld). Wie würden Sie wissen, dass Sie "hinzufügen" den neuen Wert, wenn es nichts anzeigt, dass es neu ist? Gibt es einen Weg, um hook in das, was die von der Suche zurückgegebenen Methode?
- Möchten Sie ein Element hinzufügen, um die Liste der minute des Quell-Arrays enthalten nicht es? Wäre das nicht die Ursache jedes einzelne Zeichen der person eingegeben werden abgelegt im Quell-array? Oder bin ich Missverständnis?
- Sorry, ich glaube nicht, ich bin die Kommunikation der Idee richtig. Die Voraussetzung ist, dass der Benutzer tippt einen Begriff ein, der löst das AutoVervollständigen. Wenn Sie nicht sehen, was Sie wollen, in der Liste der verfügbaren Optionen, können Sie fügen Sie dann den Begriff irgendwie (- Taste, drücken Sie enter, etc), die es ausdrückt in der Liste und wählt es. Dies ist der Grund, warum ich weiß nicht, ob "Wandel" arbeiten würde. Wenn ich über remote JSON als Quelle, ich glaube, ich könnte einen Rückruf, aber das ist nicht der Fall hier. Die Quelle wiedergegeben wird inline mit der Seite, in diesem Fall.
- Oh ich sehe. Ich glaube, ich kann mir die Aufnahme. Eine Sekunde...
- Die Antwort auf dies wäre sehr hilfreich, obwohl es scheint, die "zweite" sich in ein paar Jahren.
- Was ist mit der Sektion Update und Bearbeiten Sie Datum, dass vor ein paar Minuten nach dem Kommentar?
- wenn Sie wollen, um die Schaltfläche wieder ausblenden, wenn der Benutzer tatsächlich wählt aus der Reihe, sobald die Schaltfläche HINZUFÜGEN wird angezeigt - siehe meine alternative Lösung mit Hilfe des jquery UI-Methode "change" innerhalb von AutoVervollständigen.
InformationsquelleAutor Andrew Whitaker

Die Antwort von Andrew bewirkt, dass die Schaltfläche NEU HINZUFÜGEN zu bleiben, selbst wenn der Benutzer wählt ein vorhandenes Element aus dem array statt der Zugabe von "neuen" !!!

Statt inklusive einer Anzeige über den button 'hinzufügen', gibt es eine integrierte in .ändern Sie die Funktion innerhalb von AutoVervollständigen, die verwendet werden können.

Obwohl "Ändern" wartet, bis das Textfeld den Fokus verliert, kann dies eine bessere Schnittstelle zu zeigen Sie dann die SCHALTFLÄCHE HINZUFÜGEN, wenn es nicht ein Spiel, um das array. (oder schaffen könnte, ein "bestätigen" hinzufügen).

Finden Sie unter alternativ-code, der eigentlich verbirgt sich der "Hinzufügen-Button" wieder, wenn der Benutzer wählt aus dem array. Etwas, das Andrew Whitaker, der die Lösung nicht :

$(function () {

  var source = ["Apples", "Oranges", "Bananas"];

  $("#auto").autocomplete({
    source: function (request, response) {
        var result = $.ui.autocomplete.filter(source, request.term);


        response(result);
    },
    change: function( event, ui ) {
      var $label = $(this);
      //figure out the id of hidden input box from label id
      var $id = $('#'+this.id.replace('label_','id_'));
      if ( ui.item === null && $label.val() != '' ){
        $("#add").show();            
      }
        if( ui.item != null && $label.val() != '' ){
        $("#add").hide();            
      }
    }
  });

  $("#add").on("click", function () {
    source.push($("#auto").val());
    $(this).hide();
  });

});

Siehe meine überarbeitete Geige in Aktion - http://jsfiddle.net/VLLuJ/25/

InformationsquelleAutor Martin Sansone - MiOEE

0

Alte Frage, aber nützliche Antwort:

Aktualisieren der AutoVervollständigen-Quelle, mithilfe der setter:

$("#auto").autocomplete("option", "Quelle",
["Äpfel","Orangen","Bananen","Pflaumen"]);

Sehen http://api.jqueryui.com/autocomplete/#option-source

InformationsquelleAutor peter.fr

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.