ejemplo - jquery autocomplete combobox

Borrar cuadro de texto en Jquery Autocompletar después de la selección

Question

Quiero borrar el cuadro de texto que tiene Jquery Autocompletar una vez que el usuario ha hecho la selección.

Intenté despejar el campo al:

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

Pero esto no funciona. Estoy usando jquery-1.6.4 y jquery-ui-1.8.16.

¿Algunas ideas?

Answer 1

El evento de select ocurre antes de que se actualice el campo. Deberá cancelar el evento para evitar que el campo se actualice después de haberlo borrado:

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

Actualización: Como TJ señaló a continuación, es un poco más rápido actualizar el value propiedad DOM directamente en lugar de pasar por val() :

select: function(event, ui) {
    this.value = "";
    return false;
}

Answer 2

Estoy usando jQuery UI versión 1.8.23 y $(this).val(""); en el evento select no funcionó para mí, pero esto hizo:

$("selector").autocomplete({
    // ...
    close: function(el) {
        el.target.value = '''';
    }
});

Answer 3

También puedes probar esto:

$("#your_autocomplete_sub_listview_id").children().addClass("ui-screen-hidden");

que ocultará toda la lista filtrada de autocompletar al seleccionarla.

Answer 4

Tratar

select: function(event, ui) {
input.value='''';
}