Löschen Sie das Formularfeld nach der Auswahl für jQuery UI Autocomplete

Question

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

Ich habe die Spannweite erscheint gut, aber ich kann nicht das Feld zu klären.

Wie annullieren Sie die Standardauswahlaktion von jQuery UI Autocomplete?

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(""); tun funktioniert nicht. Was ist zum Verrücktwerden ist, dass fast die genaue Funktion funktioniert gut, wenn ich die automatische Vervollständigung ignorieren und nur Maßnahmen ergreifen, wenn der Benutzer ein Komma als solche:

$('[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 erhalten die automatische Vervollständigung ist mit Mehrfachauswahl zu arbeiten. Wenn jemand Vorschläge dafür hat, wären sie willkommen.

Answer 1

$(this).val(''); return false; bis zum Ende Ihrer select Funktion Fügen Sie das Feld und kündigen das Ereignis zu löschen :)

Dies wird den Wert von wird aktualisiert verhindern. Sie können sehen, wie es funktioniert around line 109 here.

Der Code in dort überprüft falsch speziell:

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

Answer 2

return false innerhalb der Auswahl Rückruf erforderlich ist, um das Feld zu leeren. aber wenn Sie das Feld wieder steuern möchten, d. H. Den Wert festlegen, müssen Sie eine neue Funktion aufrufen, um aus dem ui herauszubrechen.

Vielleicht haben Sie einen Aufforderungswert wie zum Beispiel:

var promptText = "Enter a grocery item here." 

Set es als das Val des Elements. (Wir konzentrieren uns 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 
} 

Answer 3

Anstelle von Rückgabe 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(); 
} 

Answer 4

Es funktioniert gut für mich.

Nach ausgewähltem Ereignis habe ich Ereigniswechsel verwendet.

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

Ich bin ein Anfänger!

Answer 5

Probieren Sie diese

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