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 Element @ angehängt is<p> Etikett. Dann soll das Feld gelöscht werden, anstatt mit der Auswahl gefüllt zu werden.

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

Wie brechen Sie die Standardauswahlaktion von jQuery UI Autocomplete ab?

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 verrückt macht ist, dass fast die exakte Funktion gut funktioniert, wenn ich die automatische Vervollständigung ignoriere und einfach 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.