2016-09-19 55 views
0

我有一個自動完成控件,當我的自定義數據源渲染第一組自動完成的「建議」時工作。jquery自動完成 - 可點擊的附加項目

我有一個機制,檢測何時滾動在最底部,在這種情況下,其他數據加載並附加到自動完成UL元素。

// This loads more data when scroll bar reaches the bottom of autocomplete suggestion list. 
$(".autocomplete ul", $MyForm).bind('scroll', function() { 
       var $this = $(this); 
       if ($this.scrollTop() > maxScrollTopLength) { 
        maxScrollTopLength = $this.scrollTop(); 
        if (!currentCallInProgress && maxScrollTopLength > $this[0].scrollHeight - $this.height() - settings.bottomScrollLength) { 
         skipToken += 1; 
         // search for suggestions based on scroll movement. 
         loadMoreItems(pageSearch.$query.val()); 
        } 
       } 
      }); 

問題是這樣的:

所附的項目無法點擊,儘管它們出現在列表中。 我在做什麼錯?

請注意,在處理附加數據項的加載的方法中,沒有響應對象要調用(它被稱爲source:function)。

*更新:*

我的自動完成控制實現源:這樣的:

source: function (request, callback) { 
    loadData(request.term, callback); 
    // loadData basically makes an $.ajax call to retrieve data, and calls - 
    // callback(results) 
} 

源:功能(請求,響應){

回答

1
以刷新列表

自動完成的值以便它包含新的值,並且它們功能完全可以使用這樣的調用...

$("#myAutocompleteFieldId").autocomplete({ 
     source: initialValues.concat(newValues) 
    });  
}); 

...而是直接在自動完成的UL中添加條目。通過這種方式,jquery ui庫將知道如何正確處理新值。 我已經在這裏做了一個JSFiddle來說明它是如何工作的:https://jsfiddle.net/n3p3epkc/ 如果你輸入'j',你會看到來自初始列表的條目。當你輸入'ja'時,列表將被更新爲附加值。

+0

感謝您的回答。我很快就會對此進行測試,如果有效,請給予信用! – AlvinfromDiaspar

+0

你可以更新你的答案,包括我的方案(我拉動額外的數據基於滾動位置)? – AlvinfromDiaspar

+0

你可以設置一個JSFiddle,代碼如何工作,我可以在那裏調試它?有一些零件丟失,我不確定一切都適合。在ajax調用的情況下,您需要在回調中更新源服務器中的源。 – Sergiu

0

我發現了一個很好的,優雅的解決方案,用於解決我的問題。 基本上,當滾動事件調用搜索時,我將一個名爲「appending」的變量設置爲true。

當搜索結果返回「追加」結果時,我只需將項目列表連接到單獨的列表。

來源:函數現在被修改爲執行其通常的新搜索或通過響應回調呈現建議項目的完整列表。

簡而言之,source:函數根據「appending」變量的狀態爲true或false,做了兩件不同的事情。

希望這可以幫助別人。