IU de autocompletado de jQuery: me gustaría iniciar la búsqueda en foco sin que el usuario tenga que escribir nada

Question

IU de autocompletado de jQuery: me gustaría iniciar la búsqueda "en foco" e inmediatamente mostrar la lista de opciones cuando las pestañas del usuario o hace clic en el campo de búsqueda sin que el usuario tenga que escribir nada.

El comportamiento predeterminado parece requerir que el usuario ingrese un carácter o una flecha hacia abajo para comenzar a rodar la bola y comenzar la búsqueda y obtener los valores incluso cuando configuro el número de caracteres requerido a cero.

 

$("#contact").autocomplete({ 
    source: 'remote.php', 
    minLength: 0 
}); 

gracias!

Answer 1

$("#contact").focus(function() { 
    if ($(this).val().length == 0) { 
     $(this).autocomplete("search"); 
    } 
}); 

Asegúrese de que su minLength autocompletar es 0.

Answer 2

Un poco más complicada que la respuesta de Emmett, pero ...

• aparece en la lista de enfoque incluso cuando la caja ya contiene texto
• Evita que vuelva a aparecer la lista al hacer clic en un elemento

Ella e es:

var closing = false; 

$('#contact').autocomplete({ 
    source: 'remote.php', 
    minLength: 0, 
    close: function() 
    { 
     // avoid double-pop-up issue 
     closing = true; 
     setTimeout(function() { closing = false; }, 300); 
    } 
}) 
.focus(function() { 
    if (!closing) 
     $(this).autocomplete("search"); 
}); 

Answer 3

esta solución no funciona para mí, pero esto:

$('#contact').autocomplete({ 
source: 'remote.php', 
minLength: 0 
      }).focus(function(){ 
if (this.value == "") 
$(this).trigger('keydown.autocomplete'); 
}); 

funciona bien (fuente: jquery forum)

Answer 4

This solution no funcionó exactamente para mí porque el autocompletar El cuadro de resultados volvería a aparecer una vez más después de seleccionar el resultado deseado. Esto se debe a que el método .focus se ejecutó antes del evento close:.

Además, de acuerdo con el código en that answer, una vez que la caja cerrada, que no se podía abrir una copia de seguridad porque la variable closing quedó true debido a close: ser ejecutado después de .focus.

El siguiente código resuelve estos dos problemas (tenga en cuenta la variable closing se establece en false en caso close:):

var closing = false; 

$(function() {$(".autocomplete").autocomplete({ 
    source: 'remote.php', 
    minLength: 0, 
    open: function(){ 
     closing=true; }, 
    close: function(){ 
     closing = false; 
     } 
}) 
    .focus(function(){ 
     if ((!closing) && ($(this).val() !== "")){ 
      $(this).autocomplete("search"); 
     } 
    }); 
}) 

Answer 5

me encontré con que el código era un poco más limpio y el elemento específico.

$(<selector>).autocomplete({ 
      minLength: 0, 
      delay: 500, 
      source: funcDataLookUp, 
      open: function() { $(this).attr('state', 'open'); }, 
      close: function() { $(this).attr('state', 'closed'); } 
     }).focus(function() { 
      if ($(this).attr('state') != 'open') { 
       $(this).autocomplete("search"); 
      } 
     }); 

Answer 6

Pruebe vinculando el focus con autocompletar.

$("#contact").autocomplete({ 
     source: 'remote.php', 
     minLength: 0 
    }).bind('focus', function() { 
     $(this).autocomplete("search"); 
    }); 

Mira mi muestra JSFiddle.

Answer 7

JQUERY realidad sugiere este método

http://api.jqueryui.com/autocomplete/#method-search

$('.yourclass').autocomplete({ 
    minLength: 0 
    ,source:['blah','andblahagain'] 
    ,focus: function() { 
    $(this).autocomplete("search", ""); 
    }, 
}); 

básicamente se utilizan minLength: 0 y el evento de enfoque con una búsqueda de "".