jQuery自動完成功能將項目添加到呈現的下拉菜單

Question

我想知道是否有任何方法可以在已呈現的下拉自動完成菜單中添加新項目。

我想做的是使用ajax從服務器獲取固定數量的結果，並在最后顯示“ Show More ...”鏈接。 如果選中，則此鏈接應啟動另一個ajax查詢，並在同一下拉列表中加載更多項目。

有道理嗎？ 我也不確定我是否考慮得太多，是否有更簡單的方法來執行相同的任務。

編輯1

我目前擁有的代碼與此類似：

 $(function () { $("#srchOperator").autocomplete({ source: function (request, response) { $.ajax({ url: "someURL", type: "POST", dataType: "JSON", data: JSON.stringify(somePostData), success: function (data) { response($.map(data), function(item) { return { label: item.fields['op'], id: item._id } }); var totalResults = data.total if (totalResults - 10 > 0) { $('.ui-autocomplete').append('<li ' + 'class=ui-menu-item><a ' + 'href="#">(' + (totalResults - 10) + ' more...)</a></li>'); } }, }); }, minLength: 2, }) }); 

第一個ajax調用將僅檢索10個元素，並且“更多”鏈接應執行一個ajax調用，該調用將項目附加到其回調的下拉列表中。

Answer 1

有了它，您可以使用CSS隱藏其余部分。

.ui-autocomplete li:nth-of-type(1n+10) {
   display: none;
}

.ui-autocomplete li.moreResults {
   display: block;
}

鏈接的Javascript如下所示：

$('.moreResults').click(function(){
   $('.ui-autocomplete li').show();
});

請注意，我為鏈接添加了一個類，以區別於常規項目。 如果在聲明此函數后創建了鏈接，則需要使用on函數，例如：

$(document).on('click','.moreResults',function(){
   $('.ui-autocomplete li').show();
});

這應該可以解決問題。 附帶一提，我個人將對其進行重組，以僅獲取最初需要的結果，因為它加載速度更快，而單擊更多則加載下一組。