Cancella campo di modulo dopo selezionare per jQuery UI completamento automatico

Question

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.

Answer 1

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

Answer 2

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

Answer 3

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
}

Answer 4

Funziona bene per me.

Dopo Seleziona evento, ho usato evento change.

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

Sono un principiante!

Answer 5

  

Prova questo

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

Answer 6

Ho appena risolto costringendo alla messa a fuoco perdere:

$('#select_id').blur();
printResult();