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();
});

这应该可以解决问题。 附带一提，我个人将对其进行重组，以仅获取最初需要的结果，因为它加载速度更快，而单击更多则加载下一组。