usar - Borrar campo de formulario después de seleccionar para jQuery UI Autocompletar

jquery autocomplete select example

Question

Estoy desarrollando un formulario y usando jQuery UI Autocomplete. Cuando el usuario selecciona una opción, quiero que la selección aparezca en un lapso adjunto a la etiqueta padre <p> . Luego quiero que el campo se borre en lugar de rellenarlo con la selección.

Tengo el intervalo que parece estar bien, pero no puedo despejar el campo.

¿Cómo se cancela la acción de selección predeterminada de jQuery UI Autocomplete?

Aquí está mi código:

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

Simplemente haciendo $(this).val(""); no funciona Lo que es enloquecedor es que casi la función exacta funciona bien si ignoro la función autocompletar, y solo tomo medidas cuando el usuario escribe una coma como tal:

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

El resultado final real es obtener autocompletar para trabajar con múltiples selecciones. Si alguien tiene alguna sugerencia para eso, sería bienvenido.

Answer 1

Prueba esto

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

Answer 2

Agregue $(this).val(''''); return false; $(this).val(''''); return false; al final de su función de select para borrar el campo y cancelar el evento :)

Esto evitará que el valor se actualice. Puedes ver cómo funciona alrededor de la línea 109 aquí .

El código allí comprueba específicamente falso:

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

Answer 3

En lugar de devolver falso, también podría usar 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

Funciona bien para mí

Después de seleccionar el evento, utilicé el cambio de evento.

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

¡Soy un principiante!

Answer 5

return false es necesario dentro de la devolución de llamada select, para vaciar el campo. pero si desea controlar nuevamente el campo, es decir, establecer el valor, debe llamar a una nueva función para salir de la interfaz de usuario.

Tal vez tiene un valor rápido como:

var promptText = "Enter a grocery item here."

Establézcalo como el valor del elemento. (En el enfoque, establecemos en '''').

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