JQuery自动完成将项目添加到呈现的下拉菜单

Question

我想知道是否有任何方法可以在已呈现的下拉自动完成菜单中添加新项目。

我要做的是使用 ajax 从服务器获取固定数量的结果，并在最后显示“显示更多...”链接。如果选中，此链接应启动另一个 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();
});

这应该可以解决问题。附带说明一下，我个人会对其进行重组，以仅获取您最初需要的结果，因为它会加载得更快，并在您单击更多时加载下一组。