Deseleziona campo modulo dopo seleziona per jQuery UI Completamento automatico

Question

Sto sviluppando un modulo e utilizzo il completamento automatico dell'interfaccia utente jQuery. Quando l'utente seleziona un'opzione, voglio che la selezione compaia in un intervallo aggiunto al tag principale <p>. Quindi voglio che il campo si cancelli piuttosto che essere popolato con la selezione.

Ho lo span che appare bene, ma non riesco a far sparire il campo.

Come si annulla l'azione di selezione predefinita di completamento dell'interfaccia utente jQuery?

Ecco il mio codice:

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>"); 
    } 
}); 

Semplicemente facendo $(this).val(""); non funziona. Ciò che è esasperante è che quasi l'esatta funzione funziona bene se ignoro completamento automatico, e basta prendere azione quando l'utente digita una virgola come tale:

$('[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>"); 
    } 
}); 

Il vero risultato finale è quello di ottenere il completamento automatico per lavorare con selezioni multiple. Se qualcuno ha qualche suggerimento per questo, sarebbero i benvenuti.

Answer 1

Aggiungi $(this).val(''); return false; alla fine della funzione select di sgombrare il campo e annullare l'evento :)

Questo eviterà che il valore venga aggiornato. Puoi vedere come funziona around line 109 here.

Il codice in là verifica la falsa specificamente:

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

Answer 2

ritorno falso è necessaria nel selezionare richiamata, per svuotare il campo. ma se si desidera controllare nuovamente il campo, cioè impostare il valore, è necessario chiamare una nuova funzione per uscire dall'interfaccia utente.

Forse hai un valore di prompt come ad esempio:

var promptText = "Enter a grocery item here." 

impostarlo come val dell'elemento. (a fuoco abbiamo impostato su "").

$("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

Invece di restituire false, è possibile utilizzare anche event.preventDefault().

select: function(event, ui){ 
    var newTag = $(this).val(); 
    $(this).val(""); 
    $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>"); 
    event.preventDefault(); 
} 

Answer 4

Funziona bene per me.

Dopo l'evento selezionato, ho utilizzato il cambio di evento.

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

Sono un principiante!

Answer 5

Try This

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