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

这应该可以解决问题。顺便说一句，我个人会重组它，只获取您最初需要的结果，因为它会加载得更快，并在您单击更多时加载下一组。