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

Question

aquí está mi código, ¿hay algún problema con él? no parece a la lista en la pantalla de enfoque, todavía tengo que pulsar una tecla antes de que lista muestra

<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

Parece que va a conectar el controlador focus() a la función anónima y no el 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 2

El objetivo genérico de Autocompletar es ejecutar al pulsar la tecla y en base a la carta que escribimos a menudo se llevará a cabo una búsqueda de comodín y mostrar el resultado.

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

enfoque (function() {$
(este) .trigger ('keydown.autocomplete');

que se adjunta como dijo por Codesleuth, a la función anónima en lugar del control.

Answer 3

la solución para hacer 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 4

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 foco vuelve al control cuando haces clic, por lo que vuelve a abrir la lista cuando debería estar cerrándolo.

Aquí hay una solución, y es la única que funciona para mí de la forma en que creo que debería funcionar cuando se utiliza la última versión (1.8.11) de la función autocompletar(). Cuando el control recibe el foco, no lo hace la pantalla-All-on-foco si la lista desplegable ya se muestra ...

<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 5

esta llamada directamente método de búsqueda con el valor por defecto cuando el foco.

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

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

Answer 6

$(this).trigger('keydown.autocomplete'); ¿El trabajo no es para mí.

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

Answer 7

Si desea cambiar algo de jQuery UI, hacerlo a la manera de jQuery UI.

Utilizar jQuery UI Widget Factory. Es más fácil de mantener, más rápido y mucho más limpio que asociar 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

Con versiones más recientes puede que tenga que cambiar de autocompletar a uiAutocomplete

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

Answer 9

Esta manera correcta de trabajo.

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

    this._super(); 
    } 
});