Klare Form Feld nach wählen für jQuery UI automatische Vervollständigung

Question

Ich entwickle ein Formular, und mit jQuery UI automatischer Vervollständigung. Wenn der Benutzer eine Option auswählt, möchte ich die Auswahl in einer Spanne an die Mutter <p> Tag angefügt Pop. Dann möchte ich das Feld eher klar als mit der Auswahl aufgefüllt werden.

Ich habe die Spanne nur gut erscheinen, aber ich kann das Feld löschen nicht erhalten.

Wie kündigen Sie jQuery UI automatische Vervollständigung des Standard Aktion auswählen?

Hier ist mein Code:

var availableTags = ["cheese", "milk", "dairy", "meat", "vegetables", "fruit", "grains"];
$("[id^=item-tag-]").autocomplete({
    source: availableTags,

    select: function(){
        var newTag = $(this).val();
        $(this).val("");
        $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    }
});

Einfach tun $(this).val(""); funktioniert nicht. Was aufreizend ist, ist, dass fast die genaue Funktion funktioniert gut, wenn ich die automatische Vervollständigung ignorieren und nur Maßnahmen ergreifen, wenn der Benutzer ein Komma als solche:

$('[id^=item-tag-]').keyup(function(e) {
    if(e.keyCode == 188) {
        var newTag = $(this).val().slice(0,-1);
        $(this).val('');
        $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    }
});

Das eigentliche Ergebnis ist mit mehreren Auswahlmöglichkeiten zum automatischen Vervollständigung zur Arbeit zu kommen. Wenn jemand irgendwelche Vorschläge für die hat, würden sie willkommen sein.

Answer 1

In $(this).val(''); return false;  bis zum Ende Ihrer select Funktion des Feld zu löschen und das Ereignis abbrechen:)

Damit wird der Wert von derzeit aktualisiert verhindern. Sie können sehen, wie es um die Linie 109 hier arbeitet .

Der Code in dort überprüft falsch speziell:

if ( false !== self._trigger( "select", event, { item: item } ) ) {
  self.element.val( item.value );
}

Answer 2

Statt return false könnten Sie auch Event.preventDefault () verwenden.

select: function(event, ui){
    var newTag = $(this).val();
    $(this).val("");
    $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    event.preventDefault();
}

Answer 3

return false wird innerhalb der Auswahl Rückruf erforderlich, um das Feld zu leeren. aber wenn Sie wieder wollen, um das Feld zu steuern, das heißt, den Wert zu setzen, müssen Sie eine neue Funktion aufrufen des ui auszubrechen.

Vielleicht haben Sie einen Aufforderungswert wie zum Beispiel:

var promptText = "Enter a grocery item here."

Es ist als das Val des Elements. (Auf Fokus setzen wir auf ‚‘).

$("selector").val(promptText).focus(function() { $(this).val(''); }).autocomplete({
    source: availableTags,
    select: function(){
        $(this).parent().append("<span>" + ui.item.value + "<a href=\"#\">[x]</a> </span>");
     foo.resetter(); // break out //
    return false;  //gives an empty input field // 
    }
});

foo.resetter = function() {
  $("selector").val(promptText);  //returns to original val
}

Answer 4

Es funktioniert gut für mich.

Nach der Wahl Ereignisse, habe ich Ereignis ändern.

 change:function(event){
   $("#selector").val("");  
   return false;
 }

Ich bin ein Anfänger!

Answer 5

  

Versuchen Sie, diese

select: function (event, ui) {
    $(this).val('');
    return false;       
}

Answer 6

Ich kann es nur gelöst zwingen zu verlieren Fokus:

$('#select_id').blur();
printResult();