show effect jquery ui

Mostrar jquery ui lista de autocompletar en el evento de enfoque

Question

Aquí está mi código, ¿algo malo con él? no parece mostrar la lista en el foco, todavía tengo que presionar una tecla antes de mostrar la lista

<link media="all" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>

<script type="text/javascript">
    $(function() {
        $(''#id'').autocomplete({
            source: ["ActionScript",
                        "AppleScript",
                        "Asp",
                        "BASIC",
                        "C",
                        "C++",
                        "Clojure",
                        "COBOL",
                        "ColdFusion",
                        "Erlang",
                        "Fortran",
                        "Groovy",
                        "Haskell",
                        "Java",
                        "JavaScript",
                        "Lisp",
                        "Perl",
                        "PHP",
                        "Python",
                        "Ruby",
                        "Scala",
                        "Scheme"
                    ],
            minLength: 0
        });
    }).focus(function(){            
            $(this).trigger(''keydown.autocomplete'');
    });
</script>


<input type="text" id="id">

Answer 1

Con versiones más recientes, es posible que necesite cambiar la función autocompletar a uiAutocomplete

$(this).data("uiAutocomplete").search($(this).val());

Answer 2

El propósito genérico de Autocompletar es ejecutar una pulsación de tecla y, según la letra que escribimos, realizará una búsqueda de comodines y mostrará el resultado.

De todos modos, desde el código anterior puedo ver que:

enfoque (función () {
$ (this) .trigger (''keydown.autocomplete'');

que se adjunta según lo indicado por Codesleuth, a la función anónima en lugar del Control.

Answer 3

Esto funciona de manera correcta.

$.widget(''custom.autocomplete'', $.ui.autocomplete, {
  options: {
    minLength: 0
  },
  _create: function() {
    this._on(this.element, {
      focus: function(event) {
        this.search();
      }
    });

    this._super();
  }
});

Answer 4

Esto llama directamente al método de búsqueda con valor predeterminado cuando se enfoca.

http://jsfiddle.net/steelywing/ubugC/

$("input").autocomplete({
    source: ["Apple", "Boy", "Cat"],
    minLength: 0,
}).focus(function () {
    $(this).autocomplete("search");
});

Answer 5

La solución para que funcione más de una vez.

<script type="text/javascript">
    $(function() {
        $(''#id'').autocomplete({
            source: ["ActionScript",
                        /* ... */
                    ],
            minLength: 0
        }).focus(function(){     
            //Use the below line instead of triggering keydown
            $(this).data("autocomplete").search($(this).val());
        });
    });
</script>

Answer 6

Parece que está adjuntando su controlador focus() a la función anónima y no al cuadro de texto.

Prueba esto:

<script type="text/javascript">
    $(function() {
        $(''#id'').autocomplete({
            source: ["ActionScript",
                        /* ... */
                    ],
            minLength: 0
        }).focus(function(){            
            // The following works only once.
            // $(this).trigger(''keydown.autocomplete'');
            // As suggested by digitalPBK, works multiple times
            // $(this).data("autocomplete").search($(this).val());
            // As noted by Jonny in his answer, with newer versions use uiAutocomplete
            $(this).data("uiAutocomplete").search($(this).val());
        });
    });
</script>

Answer 7

Si desea cambiar algo acerca de la interfaz de usuario de jQuery, hágalo de esta manera.

Utilizar jQuery UI Widget Factory . Es más fácil de mantener, más rápido y mucho más limpio que adjuntar eventos al elemento.

$.widget(''custom.autocomplete'', $.ui.autocomplete, {
  options: {
    minLength: 0
  },
  _create: function() {
    this._on(this.element, {
      focus: function(event) {
        this.search();
      }
    });

    this._super();
  }
});

Answer 8

digitalPBK casi tiene razón ...

Su solución funciona más de una vez, pero no cierra la lista desplegable cuando selecciona un elemento de la lista con un clic del mouse. En ese caso, el enfoque vuelve al control cuando haces el clic, por lo que vuelve a abrir la lista cuando debería cerrarse.

Aquí hay una solución, y es la única que me funciona de la manera que creo que debería funcionar cuando se usa la versión más reciente en este momento (1.8.11) de la función autocompletar (). Cuando el control recibe el enfoque, no realiza la visualización de todo en foco si ya se muestra la lista desplegable ...

<script type="text/javascript"> 
    $(function() {
        $(''#id'').autocomplete({
            source: ["ActionScript",
                        /* ... */
                    ],
            minLength: 0
        }).focus(function () {
            if ($(this).autocomplete("widget").is(":visible")) {
                return;
            }
            $(this).data("autocomplete").search($(this).val());
        });
</script>

Answer 9

$(this).trigger(''keydown.autocomplete''); no me funciona del todo

Esto es lo que hice:

$(''#id'').on( "focus", function( event, ui ) {
    $(this).trigger(jQuery.Event("keydown"));
   // Since I know keydown opens the menu, might as well fire a keydown event to the element
});