2014-10-07 173 views
0

我有這個組合框一些困難選擇下一個項目:問題在自動完成組合框

http://jqueryui.com/autocomplete/#combobox

我實現它在我的網站,它的偉大工程,但我得到投訴的負載當人們選擇了某些東西並且他們想要去組合框中的下一個項目時。 通常你會點擊組合框並按下向下鍵,但這不適用於這個特定的代碼。

我在找的是修改這段代碼。

我已經嘗試了幾件事情,比如嘗試將下拉列表的ui-state-focus設置爲所選項目時顯示,但我無法使其正常工作。 我也嘗試添加一個滾動條到下拉菜單,然後設置項目上的選擇高亮顯示。

我目前做了一個'哈克',在那裏我只顯示原始項目並編輯了代碼,以便該框的下三角形在輸入字段旁邊可見。所以當用戶點擊它時,他會得到原始的下拉菜單而不能過濾它,但他可以簡單地使用鍵或向上來選擇下一個或上一個。 不幸的是,這是非常骯髒,我想它清理乾淨一點

$.widget("custom.combobox", { 
        _create: function() { 
         this.wrapper = $("<span>") 
          .addClass("custom-combobox") 
          .insertBefore(this.element); 
         this.element.width(5).addClass("showAllButton"); 
         this._createAutocomplete(); 
         this._createShowAllButton(); 
        }, 

就是我想可能還是需要使用不同的組成部分?如果可能我應該如何解決它?

我想補充說過濾器/自動完成選項是強制性的。

回答

0

您可以嘗試用流動代碼替換_source方法。當過濾開始之前列表不可見時,它將打開完整的選項列表,這是用戶重新進入組合並按下按鍵時所需的。我還沒有測試過這個解決方案的所有情況,我知道比如說這不會選擇以前選擇的值,但它是一個開始:)

如果您需要進一步增強此功能,您應該查看autocomplete widget以及如何擴展它以滿足您的需求。

this._source = function(request, response) { 
    var input = this.input; 
    var wasOpened = input.autocomplete("widget").is(":visible"); 
    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
    response(this.element.children("option").map(function() { 
     var text = $(this).text(); 
     if (this.value && (!wasOpened || !request.term || matcher.test(text))) 
      return { 
       label: text, 
       value: text, 
       option: this 
      }; 
    })); 
}