Jak uzyskać autouzupełnianie jQuery do wyskakiwania w polu ostrości?

Question

Powiel możliwe:
jQuery autocomplete UI- I'd like it to start the search onfocus without the user having to type anything

jQuery UI Autocomplete

Chcę opcje pojawiać jak tylko mój wkład jest skoncentrowany. Czy jest na to ustawienie? Próbowałem ustawić minLength na 0, ale to nie działa ... wciąż czeka na naciśnięcie klawisza.

Answer 1

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

Tutaj jsfiddle: http://jsfiddle.net/fpHf4/2/ Updated jeden (dla IE): http://jsfiddle.net/q9ERL/4/

Jak enlighted przez @HoldOffHunger należy także ustawić MINLENGTH do 0

Answer 2

Myślę, że u łamią "autouzupełnianie" użyteczność po prostu dokonanie stylizowanej selekcji, to powód, dla którego należy poczekać na naciśnięcie klawisza, aby mieć coś do wypełnienia.

Wiem, że nie jest to anser, którego szukasz, tylko pamiętaj, że próbujesz zrobić tylko pracować z kilkoma opcjami, jeśli jest ich wiele, otrzymasz trudne autouzupełnianie obciążenia div na pierwszych literach.

A może u może mieć 10 rekordów Wynik na ur zapytania sql, jeśli jest z tym tak szybko dostać bez załadunku wszelkiego rodzaju wyników

--- przetestować ostrości zwiążesz na IE8, to się nie powiedzie, przy okazji nie ma błędu, robi dokładnie to, co chcesz otworzyć pole div na fokusie, różnica polega na tym, że IE uruchamia zdarzenie Focus z jquery fokusowym zdarzeniem, nie tak jak inne, więc su musi ocenić na fokusie zdarzenia, jeśli pole jego puste wyszukiwanie uruchamiania, jeśli nie jest po prostu nie rób nic .. mam nadzieję, że to pomaga.

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

Answer 3

Oto rozwiązanie, które nie pop otworzyć listę po raz drugi po wybraniu elementu (jak wspomniano przez Marka), a także działa, gdy pole wejściowe ma już tekst:

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

Answer 4

Oto moje pełne rozwiązanie (robi kilka innych rzeczy też):

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