wake-up-neo.com

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

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

Die Spannweite scheint gut zu sein, aber ich kann das Feld nicht klarstellen.

Wie brechen Sie die Standardauswahlaktion der jQuery UI-Autovervollständigung 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 $(this).val(""); zu tun, funktioniert nicht. Was verrückt ist, ist, dass fast die genaue Funktion gut funktioniert, wenn ich die Autovervollständigung ignoriere und einfach etwas unternehme, 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.

87
Jon F Hancock

Fügen Sie $(this).val(''); return false;.__ hinzu. bis zum Ende der 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 um die Linie 109 herum ist .

Der Code dort prüft speziell auf false:

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

Anstelle von false 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();
}
19
user1128713

return false ist innerhalb des select-Rückrufs erforderlich, um das Feld zu leeren. Wenn Sie jedoch das Feld erneut steuern möchten, d. h. den Wert festlegen möchten, müssen Sie eine neue Funktion aufrufen, um die Benutzeroberfläche zu verlassen. 

Möglicherweise haben Sie einen Eingabeaufforderungswert wie: 

var promptText = "Enter a grocery item here."

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

Es funktioniert gut für mich.

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

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

Ich bin ein Anfänger! 

4

Versuche dies

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

Ich habe es gerade gelöst, um den Fokus zu verlieren:

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