如何讓jQuery自動完成在場焦點上彈出？

可能重複：
jQuery autocomplete UI- I'd like it to start the search onfocus without the user having to type anything 如何讓jQuery自動完成在場焦點上彈出？

jQuery UI Autocomplete

我想要的選項，只要我輸入集中出現。有沒有一個設置？我嘗試將minLength設置爲0，但它不起作用......它仍然等待按鍵。

來源

2011-02-07 mpen

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

這裏一個的jsfiddle：http://jsfiddle.net/fpHf4/2/ 更新之一（IE）：http://jsfiddle.net/q9ERL/4/

由於恍然大悟通過@HoldOffHunger也必須設置的minLength 0

來源

2011-02-07 00:30:01 Pierre

你撥弄鏈接完全不同的東西。 – mVChr 2011-02-07 00:35:50

對不起，我沒有保存叉子......現在修復了。 – Pierre 2011-02-07 00:38:48

工程，但用鼠標選擇一個項目後，它會再次打開（我猜這是讓焦點重新回到元素了）。 – mpen 2011-02-07 00:41:20

我覺得你正在打破「自動完成」實用只是做了一個風格化的選擇，這就是等待按鍵有理由完成的原因。

我知道它不是你想找的東西，只要記住這個你試着用幾個選項做的工作，如果有很多你會在第一個字母上得到很大的autocomple div負載。

或許ü可以對烏爾SQL查詢10條結果記錄，如果是這樣那麼得到快速無需加載所有的排序結果

的---我的測試IE8的焦點綁定，它失敗了，順便說一下它沒有一個失敗，它正是你想要打開的div盒上焦點，不同之處在於IE會觸發onFocus事件，而不是像其他人那樣，所以su必須在焦點事件上評估它是否爲空發射搜索，如果不是什麼都不做..我希望這有助於。

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

來源

2011-02-07 00:48:22

下面是不會彈出打開列表中選擇一個項目（如由Mark提到的）之後的第二時間的解決方案，也適用在輸入框中已經有文字：

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

來源

2011-09-17 11:21:02 Dunc

這是我的完整解決方案（它做了一些其他的東西太多）：

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

來源

2011-09-17 18:12:34 mpen

如何讓jQuery自動完成在場焦點上彈出？

回答

相關問題