¿Cómo hacer que la lista de autocompletado de jQuery muestre todas las opciones en el enfoque y ocultar después de seleccionar la opción?

Tengo un formulario con una función de autocompletar que inicia la búsqueda “en foco” y muestra la lista de opciones cuando el usuario hace clic en el campo de búsqueda, incluso cuando no ingresan nada.

El problema es que la autocompleta requiere la opción de ser seleccionado con el teclado (flecha hacia abajo seguida de tabulación / retorno o con un doble clic). Lo primero que pensé fue que un solo clic provoca que el foco permanezca en el campo de búsqueda y, por lo tanto, el autocompletado permanezca visible. Sin embargo, el campo de búsqueda permanece enfocado después del segundo clic, pero la autocompleta desaparece después del segundo clic.

¿Algunas ideas?

 $(document).ready(function() { var autocomplete_focus = function(){ if ($(this).val().length == 0) { $(this).autocomplete("search", "%"); } } $( ".autocomplete" ).autocomplete({ source: "../../db/autocomplete_list.php", minLength: 0 }); $( ".autocomplete" ).focus(autocomplete_focus); });  

Me doy cuenta de que una pregunta similar ha sido publicada aquí antes; sin embargo, las soluciones propuestas no me funcionan.

No estoy seguro de si esta es una solución aceptable, pero una forma de hacerlo es rellenar la input con el valor focalizado. Esto evita que el menú se muestre dos veces:

 /* snip: */ focus: function (event, ui) { this.value = ui.item.value; }, 

Aquí hay un ejemplo: http://jsfiddle.net/wxQf7/

Intente eliminar el controlador de eventos de focus para ver el síntoma en la pregunta.

Este método:

 $( ".autocomplete" ).autocomplete({ source: "../../db/autocomplete_list.php", minLength: 0 }).focus(function(){ $(this).trigger('keydown.autocomplete'); }); 

funciona para mi.

Fuente:

Muestra la lista de autocompletar de jquery ui en el evento de foco

Prueba esto. Este fragmento de código en realidad elimina el keydown.autocomplete que tiene problemas. En cambio, busca cada vez que te enfocas en el campo de texto.

 $( ".autocomplete" ).autocomplete({ source: "../../db/autocomplete_list.php", minLength: 0 }).focus(function(){ $(this).data("autocomplete").search($(this).val()); } 

Sin embargo, si desea que el menú desplegable desaparezca tan pronto como seleccione una entrada, agregue esta línea.

 $( ".autocomplete" ).autocomplete({ source: "../../db/autocomplete_list.php", minLength: 0 }).focus(function(){ **if ($(this).autocomplete("widget").is(":visible")) return;** $(this).data("autocomplete").search($(this).val()); } 

Cuando el control recibe de nuevo el foco en caso de un clic del mouse, no muestra el foco de visualización si la lista desplegable ya se muestra. Eso es lo que hace este código