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, möchte ich, dass die Auswahl in einer Spanne erscheint, die an das übergeordnete Element angehängt wird <p> Schild. Dann möchte ich, dass das Feld gelöscht wird, anstatt mit der Auswahl gefüllt zu werden.

Die Spanne wird gut angezeigt, aber ich kann das Feld nicht löschen.

Wie brechen Sie die standardmäßige Auswahlaktion 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 machen $(this).val(""); funktioniert nicht. Verrückt ist, dass fast die exakte Funktion gut funktioniert, wenn ich die automatische Vervollständigung ignoriere und nur aktiv werde, 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 besteht darin, dass die automatische Vervollständigung mit mehreren Auswahlen funktioniert. Wenn jemand Vorschläge dazu hat, wäre er willkommen.

Hinzufügen $(this).val(''); return false;
bis zum Ende deines select Funktion, um das Feld zu löschen und das Ereignis abzubrechen 🙂

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

Der Code darin prüft speziell auf false:

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

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

return false wird innerhalb des select-Callbacks benötigt, um das Feld zu leeren. aber wenn Sie das Feld erneut steuern, dh den Wert setzen 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. (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
}

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 gezwungen, den Fokus zu verlieren:

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