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个元素，而“more”链接应该执行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();
});

这应该可以解决问题。在旁注中，我个人会重新构建它以仅获取您最初需要的结果，因为它会加载更快并在您单击更多时加载下一组。

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

1 个答案: