minlength - jQuery Autocompletar: seleccionar evento

jquery autocomplete select event

Question

Estoy tratando de enviar un formulario cuando se selecciona un elemento del menú. Establecí la clase en el formulario de búsqueda y estoy usando la selección de evento para ello que se encuentra aquí: http://docs.jquery.com/UI/Autocomplete#event-select

Ahora, cuando selecciona un elemento usando el teclado (arriba y abajo), funciona. Pero si selecciona un elemento con el mouse, le da el valor que se escribió previamente.

Compruebe este screenr: http://www.screenr.com/7T0s

Esto es lo que uso para enviar:

$("#searchform-input").autocomplete({
    select: function (a, b) {
        $(".searchform1").submit()
    }
});

Answer 1

Esto se debe a que el comportamiento predeterminado del evento de select se ejecuta después de que el controlador de eventos haya terminado de ejecutarse (para que pueda cancelarlo si así lo desea).

Esto significa que cuando hace clic en algo, su formulario se envía antes de que el widget tenga la oportunidad de completar la input correctamente.

Debería poder solucionarlo haciendo lo que el widget normalmente hace por usted:

$("#searchform-input").autocomplete({
    select: function (a, b) {
        $(this).val(b.item.value);
        $(".searchform1").submit()
    }
});

Ahora, lo que te estarás preguntando es sí, pero ¿por qué funciona cuando uso el teclado?

Esto sucede porque el evento de focus realidad llena el elemento enfocado en la input (fíjese bien, verá la input poblada a medida que avanza hacia arriba y hacia abajo en la lista). Cuando desplaza el mouse sobre un elemento, se invoca el evento de focus , rellenando la input . Cuando selecciona algo utilizando la tecla enter , el valor correcto pasa a estar en la input debido al evento de focus .

Answer 2

Jeje. Es bastante complicado, pero increíblemente simple de resolver. Simplemente espere la función 500 milisegundos, después del evento seleccionado. Funciona perfectamente ¡¡TRABAJO HECHO!! :)

$("#searchform-input").autocomplete({
select: function (a, b) {
    setTimeout(submit,500);
}});