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

97

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.

Jon F. Hancock
quelle

Antworten:

182

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 );
}
Nick Craver
quelle
Fantastisch! Ich fühle mich aber albern. Jetzt weiß ich, und Wissen ist die halbe Miete.
Jon F Hancock
Es hat es behoben. Ich versuchte zu akzeptieren, aber es sagte mir, dass ich 7 Minuten lang nicht mehr konnte. Akzeptiert. Vielen Dank.
Jon F Hancock
1
Lassen Sie mich nur hinzufügen, dass Sie, sobald Sie false zurückgeben, den Wert nicht mehr selbst festlegen müssen (dh nicht mehr benötigen $(this).val('');)
Uri
9
Wenn man möchte, dass das Eingabefeld überhaupt keinen Wert hat, muss meiner Meinung nach .val('')immer noch ein Aufruf an erfolgen. Dadurch return false;wird nur verhindert, dass der Text des ausgewählten Elements im Eingabefeld angezeigt wird.
Ryan
1
Uri ist falsch und Ryan ist richtig. Sie müssen false zurückgeben, um zu verhindern, dass es mit Ihrer Auswahl aktualisiert wird, und Sie benötigen zusätzlich $ (this) .val (''), wenn Sie es löschen möchten.
mynameistechno
19

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();
}
Paul Schröder
quelle
Ich vermute, diese Methode ist effizienter als die akzeptierte Antwort.
dlsso
6

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
}
Captahab
quelle
Hallo, ich hatte eine andere Frage zum Speichern der Eingabeaufforderung. Aus technischen Gründen kann ich keine Platzhalter verwenden. Das war perfekt, DANKE!
Hgolov
5

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!

Silvana Saly Viana
quelle
0

Versuche dies

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

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

$('#select_id').blur();
printResult();
Mireia Gimeno
quelle