Jquery自动完成功能对数据

Question

在我的jquery自动完成中我已经集成了一个ajax调用，它通过页面大小和页面索引来获取数据（如果我想显示5个结果，我传递pageindex = 1，pagesize = 5），如果是下一个5我传递的记录（pageindex = 1，pagesize = 5）。 所以我添加了一个额外的行＆＃34;显示更多结果＆＃34;在结果的底部，成为autosuggest列表的一部分，当我点击它，我想从同一个电话从服务器获取另外5个项目并预先添加到现有的搜索结果，保持＆＃34;显示更多的结果＆＃34;底部的项目用于下一个记录，依此类推。 我的问题是在这里，我能够预先添加结果，但自动完成css和行为不适用于我在选择呼叫上附加的那些项目。

这是我的代码：

function doneTyping（isSeeMoreReq）{

    $(".Handle").autocomplete({
        delay: 0,
        minLength: 2,
        source: function (request, response) {

            $.ajax({
                dataType: 'json',
                async: true,
                url: '/Admin/GetSearchResult?term='
                    + $('.Handle').val()
                    + "&pageIndex=" + $('#hdnpageIndex').val()
                    + "&pageSize=" + $('#hdnpageSize').val(),
                success: function (data) {
                    //$(".autosuggest-section ul").empty("<li></li>");

                    //if (data != "") {
                    //    $.each(data, function (index, value) {
                    //        $(".autosuggest-section ul").append("<li>" + value + "</li>");
                    //        $(".autosuggest-section").css('display', 'block');
                    //    })
                    //}

                    var array = data.error ? [] : $.map(data, function (m) {
                        return {
                            label: m.EntityHandle,
                            value: m.EntityHandleId,
                            imageid: m.ImageUrl
                        };

                    });
                    if (array.length > 0) {
                        // var objViewMore = array[array.length - 1];
                        var objViewMore = { label: "See More Results", value: -1 };
                        // objViewMore.label = "View More"; objViewMore.value = -1;
                        array.push(objViewMore);
                    }
                    response(array);
                }
            });
        },
        focus: function (event, ui) {
            // prevent autocomplete from updating the textbox
            event.preventDefault();
            //$(this).autocomplete("search");
            //$(this).autocomplete("enable");

        },
        open: function () {
            $(this).data("autocomplete").menu.element.addClass("custom-autocomplete");
        },
        select: function (event, ui) {
            event.preventDefault();
            if (ui.item.value == -1) {
                $("#hdnpageIndex").val(parseInt($("#hdnpageIndex").val()) + 1);
                $("#hdnpageSize").val(5);
                // $(".Handle").autocomplete("search", "few");
                //$(this).keydown();
                // $(".Handle").autocomplete("enable");
                // $(".Handle").autocomplete("search").val();
                // $('.Handle').trigger('change');
                // $(".Handle").autocomplete("option", "delay", 200);

                $.ajax({
                    dataType: 'json',
                    url: '/Admin/GetSearchResult?term='
                        + $('.Handle').val()
                        + "&pageIndex=" + $('#hdnpageIndex').val()
                        + "&pageSize=" + $('#hdnpageSize').val(),
                    success: function (data) {

                        var array = data.error ? [] : $.map(data, function (m) {
                            return {
                                label: m.EntityHandle,
                                value: m.EntityHandleId,
                                imageid: m.ImageUrl
                            };

                        });                            
                        $.each(array, function (key, item) {

                            $(".custom-autocomplete").prepend("<li class='ui-menu-item' role='presentation'><a id=ui-id-" + key * 200 + " class='ui-corner-all' tabindex='-1'><div class='program-img'><img src='" + item.imageid + "'/></div><span class='" + item.value + " autosuggest-program-name'></span>" + item.label + "</a></li>");
                        });
                        $(".custom-autocomplete").css("display", "block");
                    }
                });
                return false;
            }
            else {
                //$("#linkHandle").val(ui.item.label.replace("<b>", '').replace("</b>", '')); // display the selected text
                var inputText = ui.item.label;
                $("#linkHandle").val(inputText.replace(/<b>/g, ' ').replace(/<\/b>/g, ' ')); // display the selected text
                $("#hdnEntityHandleId").val(ui.item.value); // save selected id to hidden input
                $("#linkHandle").prop('disabled', true);
            }
            // prevent autocomplete from updating the textbox
            //event.preventDefault();
            // navigate to the selected item's url
            //window.open(ui.item.url);
        }
    }).data("autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
           .data("item.autocomplete", item)
           .append("<a><div class='program-img'><img src='" + item.imageid + "'/></div><span class='" + item.value + " autosuggest-program-name'>" + item.label + "</span></a>")
        .appendTo(ul);
    };
}