Löschen Sie das Formularfeld nach der Auswahl für die automatische Vervollständigung der jQuery-Benutzeroberfläche

Ich entwickle ein Formular und verwende jQuery UI Autocomplete. Wenn der Benutzer eine Option auswählt, soll die Auswahl in einem Bereich angezeigt werden, der an das übergeordnete <p>Tag angehängt ist . Dann möchte ich, dass das Feld gelöscht wird, anstatt mit der Auswahl gefüllt zu werden.

Ich habe die Spanne in Ordnung, aber ich kann das Feld nicht zum Löschen bringen.

Wie können Sie die Standardauswahlaktion von jQuery UI Autocomplete abbrechen?

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 zu machen $(this).val("");funktioniert nicht. Was verrückt macht, ist, dass fast die genaue Funktion gut funktioniert, wenn ich die automatische Vervollständigung ignoriere und nur dann Maßnahmen ergreife, wenn der Benutzer ein Komma als solches eingibt:

$('[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 Endergebnis ist, dass die automatische Vervollständigung mit mehreren Auswahlen funktioniert. Wenn jemand Vorschläge dazu hat, wäre er willkommen.

Fügen Sie $(this).val(''); return false; am Ende Ihrer selectFunktion hinzu, um das Feld zu löschen und das Ereignis abzubrechen :)

Dadurch wird verhindert, dass der Wert aktualisiert wird. Sie können hier sehen, wie es um Zeile 109 funktioniert .

Der Code dort prüft speziell auf false:

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

Anstatt false zurückzugeben, können 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();
}

return false wird innerhalb des Select-Rückrufs benötigt, um das Feld zu leeren. Wenn Sie das Feld jedoch erneut steuern möchten, dh den Wert festlegen möchten, müssen Sie eine neue Funktion aufrufen, um aus der Benutzeroberfläche auszubrechen.

Vielleicht haben Sie einen Eingabeaufforderungswert wie:

var promptText = "Enter a grocery item here."

Legen Sie es als Wert des Elements fest. (Im 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
}

Es funktioniert gut für mich.

Nach dem ausgewählten Ereignis habe ich die Ereignisänderung verwendet.

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

Ich bin ein Anfänger!

Versuche dies

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

Ich habe es gerade gelöst und den Fokus verloren:

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