Cancella il campo del modulo dopo la selezione per il completamento automatico dell'interfaccia utente jQuery

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

Ho la durata che sembra a posto, ma non riesco a liberare il campo.

Come si annulla l'azione di selezione predefinita del completamento automatico dell'interfaccia utente di 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>");
    }
});

Il semplice fatto $(this).val("");non funziona. Ciò che è esasperante è che quasi la funzione esatta funziona bene se ignoro il completamento automatico e agisco solo 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 è ottenere il completamento automatico per lavorare con più selezioni. Se qualcuno ha qualche suggerimento in merito, sarebbe il benvenuto.

Aggiungi $(this).val(''); return false; alla fine della tua selectfunzione per cancellare il campo e annullare l'evento :)

Ciò impedirà l'aggiornamento del valore. Puoi vedere come funziona intorno alla riga 109 qui .

Il codice in là controlla per falso in particolare:

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

Invece di return false puoi 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();
}

return false è necessario all'interno del callback select, per svuotare il campo. ma se vuoi controllare di nuovo il campo, cioè impostare il valore, devi chiamare una nuova funzione per uscire dall'UI.

Forse hai un valore prompt come:

var promptText = "Enter a grocery item here."

Impostalo come val dell'elemento. (sul focus ci siamo impostati 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
}

Funziona bene per me.

Dopo aver selezionato l'evento, ho utilizzato la modifica dell'evento.

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

Sono un principiante!

Prova questo

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

L'ho appena risolto costringendo a perdere la concentrazione:

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