Come ottenere il completamento automatico di jQuery su pop-up?

Question

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

jQuery UI Autocomplete

voglio le opzioni di apparire come appena il mio ingresso è a fuoco. C'è un ambiente per questo? Ho provato a impostare minLength su 0, ma non funziona ... attende comunque la pressione di un tasto.

Answer 1

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

Qui un jsfiddle: http://jsfiddle.net/fpHf4/2/ Aggiornato uno (per IE): http://jsfiddle.net/q9ERL/4/

Come enlighted da @HoldOffHunger è necessario impostare anche minLength a 0

Answer 2

Credo u stanno rompendo utilità "completamento automatico" solo facendo una selezione stilizzata, questo è il motivo per aspettare che una pressione di un tasto abbia qualcosa da completare.

So che non è l'anser che stai cercando, ricorda solo che stai cercando di fare solo il lavoro con poche opzioni, se ci sono molti ti sarà difficile caricare div in automatico sulle prime lettere.

O forse u può avere un 10 record di risultato su ur query SQL se è da questo modo ottenere velocemente senza caricare tutti i tipi di risultati

--- I test di messa a fuoco legato sulla IE8, non riesce, tra l'altro non è un fallimento, fa esattamente ciò che vuoi per aprire il div-box, la differenza è che IE si attiva su evento Focus con evento jquery focus, non come gli altri, quindi su deve valutare sull'evento focus se il campo è vuoto, se non lo è basta fare niente .. spero che questo aiuti.

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

Answer 3

Ecco una soluzione che non pop aprire l'elenco una seconda volta dopo aver selezionato un elemento (come detto da Mark) e funziona anche quando la casella di input ha già il testo:

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

Answer 4

Ecco la mia soluzione completa (che fa un paio di altre cose):

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