Cancella campo di modulo dopo selezionare per jQuery UI completamento automatico
-
23-09-2019 - |
Domanda
sto sviluppando una forma, e l'utilizzo di jQuery UI completamento automatico. Quando l'utente seleziona un'opzione, voglio la selezione di pop in un arco allegata al tag padre <p>
. Poi voglio il campo per cancellare piuttosto che essere popolato con la selezione.
Ho l'arco che appare più che bene, ma non riesco a ottenere il campo per cancellare.
Come si annulla l'azione di default di selezione di jQuery UI completamento automatico?
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 risultato vera fine è quello di ottenere il completamento automatico per lavorare con selezioni multiple. Se qualcuno ha qualche suggerimento per questo, essi sarebbero benvenuti.
Soluzione
Add $(this).val(''); return false;
alla fine della funzione select
di sgombrare il campo e cancellare l'evento:)
In questo modo evitare che il valore venga aggiornato. Si può vedere come funziona href="http://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js" attorno alla riga 109 qui .
Il codice in là i controlli per falso in particolare:
if ( false !== self._trigger( "select", event, { item: item } ) ) {
self.element.val( item.value );
}
Altri suggerimenti
Invece di falso cambio si potrebbe anche usare event.preventDefault ().
select: function(event, ui){
var newTag = $(this).val();
$(this).val("");
$(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
event.preventDefault();
}
false ritorno è necessaria nel selezionare richiamata, per svuotare il campo. ma se si desidera controllare di nuovo il campo, cioè impostare il valore, è necessario chiamare una nuova funzione di uscire dell'interfaccia utente.
Forse hai un valore di prompt come ad esempio:
var promptText = "Enter a grocery item here."
Imposta come val dell'elemento. (Sul fuoco ci siamo messi al '').
$("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
}
Funziona bene per me.
Dopo Seleziona evento, ho usato evento change.
change:function(event){
$("#selector").val("");
return false;
}
Sono un principiante!
Prova questo
select: function (event, ui) {
$(this).val('');
return false;
}
Ho appena risolto costringendo alla messa a fuoco perdere:
$('#select_id').blur();
printResult();