¿Cómo obtener jQuery Autocompletar para que aparezca en el campo?

Question

Duplicar posible:
jQuery autocomplete UI- I'd like it to start the search onfocus without the user having to type anything

jQuery UI Autocomplete

Quiero las opciones que aparecen tan pronto como mi entrada está enfocada. ¿Hay un escenario para eso? Intenté configurar minLength a 0, pero no funciona ... todavía espera una pulsación de tecla.

Answer 1

$("#yourField").bind('focus', function(){ $(this).autocomplete("search"); }); 

Aquí un jsFiddle: http://jsfiddle.net/fpHf4/2/ Actualizado uno (para IE): http://jsfiddle.net/q9ERL/4/

Como enlighted por @HoldOffHunger también debe establecer minLength a 0

Answer 2

Creo U están rompiendo utilidad "autocompletar" simplemente haciendo una selección estilizada, esa es la razón para esperar a que la tecla tenga algo que completar.

Sé que no es la respuesta que está buscando, simplemente recuerde esto u tratando de hacer simplemente trabajar con pocas opciones, si hay muchas obtendrá una carga de autocompleción difícil en las primeras letras.

O tal que u puede tener un 10 registros de resultados de consulta SQL ur si es de esta manera consigo rápida sin tener que cargar todo tipo de resultados

--- I prueba se unen enfoque en IE8, se produce un error, por cierto no es un error, hace exactamente lo que quiere abrir el cuadro div en el foco, la diferencia es que IE desencadena el evento Foco con un evento de foco jquery, no como los otros, así que debe evaluar el evento de foco si el campo es una búsqueda de inicio vacía, si no simplemente no hagas nada ... espero que esto ayude.

$("#yourField").bind('focus', function(){ 
    if($(this).val()!=""){ 
    $(this).autocomplete("search"); 
    } 
}); 

Answer 3

Aquí es una solución que no vuelve a abrir la lista por segunda vez después de seleccionar un elemento (como se ha mencionado por Mark) y también funciona cuando el cuadro de entrada ya tiene el texto:

jQuery autocomplete UI- I'd like it to start the search onfocus without the user having to type anything

Answer 4

Aquí está mi solución completa (también hace algunas otras cosas):

$.fn.ajaxselect = function(options) { 
    var settings = { 
     delay: 300, 
     sourceData: function(term) { 
      return {term:term}; 
     }, 
     sourceUrl: null, 
     select: function(item) {}, 
     html: true, 
     minLength: 0, 
     autoSelect: true, 
     autoFocus: true, 
     showOnClick: null 
    }; 

    if(options) $.extend(settings, options); 
    if(settings.showOnClick === null) settings.showOnClick = settings.minLength === 0; 

    $(this).autocomplete({ 
     source: function(request, response) { 
      var data = settings.sourceData.call(this.element[0], request.term); 
      if(data === false) { 
       response([]); 
       return; 
      } 
      $.ajax({ 
       url: settings.sourceUrl, 
       dataType: 'json', 
       data: data, 
       success: function(data, textStatus, $xhr) { 
        response(data); 
       }, 
       error: function($xhr, textStatus) { 
        response([]); 
       } 
      }); 
     }, 
     focus: function(e, ui) { 
      return false; // don't fill input with highlighted value 
     }, 
     search: function(e, ui) { 
      if(settings.minLength < 0 && e.hasOwnProperty('originalEvent')) return false; // don't search on keypress if minLength < 0 (use with showOnClick) 
      $(this).data('lastSearch', this.value); 
      return true; 
     }, 
     select: function(e, ui) { 
      if(!settings.autoSelect && e.keyCode === 9) return false; // don't select highlighted item on tab unless autoSelect is enabled 
      if($(this).val() === $(this).data('lastSearch')) { 
       if(settings.select.call(this, ui.item) !== false) { 
        $(this).val(ui.item.value); 
       } 
       $(this).data('selectedValue',$(this).val()).trigger('change'); 
      } 
      return false; 
     }, 
     open: function(e, ui) { 
      $(this).data('isOpen', true); 
     }, 
     close: function(e, ui) { 
      $(this).data('isOpen', false); 
     }, 
     minLength: settings.minLength, 
     autoFocus: settings.autoFocus, 
     delay: settings.delay, 
     html: settings.html 
    }).bind('change.ajaxselect', function() { 
     $(this).toggleClass('ajax-selected', $(this).val() === $(this).data('selectedValue')); 
    }); 

    if(settings.autoSelect) { 
     $(this).bind('autocompletechange.ajaxselect', function(event, ui) { 
      if($(this).val() !== $(this).data('selectedValue') && this.value.length > 0) { 
       var self = this; 
       var data = $.extend({autoSelect:1},settings.sourceData.call(this, this.value)); 
       $(this).addClass('.ui-autocomplete-loading'); 
       $.ajax({ 
        url: settings.sourceUrl, 
        dataType: 'json', 
        data: data, 
        success: function(data, textStatus, $xhr) { 
         if(data.length >= 1) { 
          var item = $.ui.autocomplete.prototype._normalize(data)[0]; 
          if(settings.select.call(self, item) !== false) { 
           $(self).val(item.value); 
          } 
          $(self).data('selectedValue',$(self).val()).trigger('change'); 
         } 
        }, 
        complete: function($xhr, textStatus) { 
         $(self).removeClass('.ui-autocomplete-loading'); 
        } 
       }); 
      } 
     }); 
    } 

    if(settings.showOnClick) { 
     $(this).bind('click.ajaxselect', function(e) { 
      if(!$(this).data('clickHandled') && !$(this).data('isOpen')) { 
       $(this).data('clickHandled',true); 
       $(this).autocomplete('search',''); 
      } else { 
       $(this).data('clickHandled',false); 
      } 
     }).bind('focus.ajaxselect', function(e) { 
      if(!$(this).data('clickHandled') && e.hasOwnProperty('originalEvent') && $(this).val() === this.defaultValue && !$(this).data('isOpen')) { 
       $(this).data('clickHandled',true); 
       $(this).autocomplete('search',''); 
      } else { 
       $(this).data('clickHandled',false); 
      } 
     }) 
    } 

    return $(this); 
};