延迟加载自动完成数据列表 angularjs

在我进行深入研究之后，我找到了一个解决方案参考是http://jsfiddle.net/LesignButure/

所以我的问题的主要问题是我必须处理现有代码而不是更改它，只需在其上添加一些脚本即可。

页面没有渲染的assmption错误，因为自动完成的生命周期是 - 1. totalLimit set limit to list 2. setAutoCompletProdectDwonloadDoc 被激活并配置自动完成的结构 3. 列表渲染 4. 滚动后down - totalLimit 已更改，组件已呈现，但列表未更改，因为自动完成尚未运行的“打开”功能。5. 重新点击输入栏后，新列表显示

所以我所做的改变在这里：

/*product*/
 $scope.setAutoCompletProdectDwonloadDoc = function()//sourceList)
 {
     var flag = true;
     var elem = jQuery("#ddProductAutoCompleteInput");
     var list = jQuery("#t_productsList_DDP");


/**
     elem.autocomplete({
         source: list.children().map(function () { return jQuery(this).val(); }).get(),//sourceList,
         minLength: 0,
         search: function (event, ui) {
             jQuery(this).data("autocomplete").menu.bindings = $();
         },
         select: function (event, ui) {
             var valueP = ui.item.value;
             flag = false;
             elem.autocomplete('close');
             $scope.$apply(function () {
                 $scope.item.onlineProd = valueP;
                 angular.forEach($scope.docTypeList, function (docType) {
                     docType.selected = false
                 });
                 $scope.tempList.length = 0;
                 $scope.filterd = 'false';

             });
         },
         open: function (event, ui) {
             var $children = jQuery(this).data('autocomplete').menu.element.children();
         }
         }).focus(function () {
             if (flag) {
                 jQuery(this).autocomplete('search', jQuery(this).val())
                 flag = false;
             } else {
                 elem.autocomplete('close');
                 flag = true;
                 return false;
             }
         }).focusout(function () { flag = true; return false; })

**/
        elem.autocomplete({
            source: list.children().map(function () { return jQuery(this).val(); }).get(),
            minLength: 0,
            delay: 0,
            search: function (event, ui) {
                jQuery(this).data("autocomplete").menu.bindings = $();
            },
            select: function (event, ui) {
                 var valueP = ui.item.value;
                 flag = false;
                 elem.autocomplete('close');
                 $scope.$apply(function () {
                     $scope.item.onlineProd = valueP;
                     angular.forEach($scope.docTypeList, function (docType) {
                         docType.selected = false
                     });
                     $scope.tempList.length = 0;
                     $scope.filterd = 'false';

                 });
             },
             open: function (event, ui) {
                 var $children = jQuery(this).data('autocomplete').menu.element.children();
            }
        }).focus(function () {
            //reset result list's pageindex when focus on
            window.pageIndex = 0;
            $(this).autocomplete("search");
        }).focusout(function () { flag = true; return false; });


        $.extend($.ui.autocomplete.prototype, {
                _renderMenu: function (ul, items) {
                    //remove scroll event to prevent attaching multiple scroll events to one container element
                    $(ul).unbind("scroll");
                    var self = this;
                    self._scrollMenu(ul, items);
                },
                _scrollMenu: function (ul, items) {
                    var maxShow = 999;
                    if(items.length > 400)
                        maxShow = 20;
                    var self = this;
                    var results = [];
                    var pages = Math.ceil(items.length / maxShow);
                    results = items.slice(0, maxShow);

                    if (pages > 1) {
                        $(ul).scroll(function () {
                            if (isScrollbarBottom($(ul))) {
                                ++window.pageIndex;
                                if (window.pageIndex >= pages) return;

                                results = items.slice(window.pageIndex * maxShow, window.pageIndex * maxShow + maxShow);

                                //append item to ul
                                $.each(results, function (index, item) {
                                    self._renderItem(ul, item);
                                });
                                //refresh menu
                                self.menu.deactivate();
                                self.menu.refresh();
                                // size and position menu
                                ul.show();
                                self._resizeMenu();
                                ul.position($.extend({
                                    of: self.element
                                }, self.options.position));
                                if (self.options.autoFocus) {
                                    self.menu.next(new $.Event("mouseover"));
                                }
                            }
                        });
                    }

                    $.each(results, function (index, item) {
                        self._renderItem(ul, item);
                    });
                }
            });

            function isScrollbarBottom(container) {
                 var height = container.outerHeight();
                 var scrollHeight = container[0].scrollHeight;
                 var scrollTop = container.scrollTop();
                 if (scrollTop >= scrollHeight - height) {
                     return true;
                 }
                 return false;
             };
  };