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

Question

我的工作是重构一些代码以提高对IE 11 的偏好， 需要的改进之一是为自动完成输入做一些延迟加载，因为IE 11 在使用 600 项渲染 array 时并不繁重。

我在一些限制条件下工作：

1. I have 4 hours to done the job (it's mean that there is no time to massive changes)
2. AngularJs version 1.3.1
3. jQuery version 1.6.8
4. The page is hosting on salesforce (it's not changing anything because it's run html and angularjs).

这是该问题的GIF： link to GIF

我成功地进行了一些延迟加载，但由于某种我不知道解释的原因，它无法正常工作。 仅在我失去焦点并再次关注输入字段后自动完成渲染列表。

这是HTML代码：

<input type="text" id="ddProductAutoCompleteInput" name="product" class="selectBoxTom" data-ng-model="item.onlineProd" datalist="t_productsList_DDP" placeholder="All Products"  />
<datalist id="t_productsList_DDP"  size="5" style="overflow-y: scroll">
     <option ng-repeat="prod in productList | limitTo:totalLimit track by $index" value="{{prod.Tapi_Online_Product_Name__c}}" ngc-done="'scope.setAutoCompletProdectDwonloadDoc'"/>
</datalist>      

这里是 AngularJs 代码：

$scope.setAutoCompletProdectDwonloadDoc = function()//sourceList)
 {  
            var flag = true;
            var elem = jQuery("#ddProductAutoCompleteInput");
            var list = jQuery("#t_productsList_DDP");
            $scope.totalLimit = 50;
            jQuery('.ui-autocomplete').scroll(function(){
                if (jQuery(this).scrollTop() + jQuery(this).innerHeight() >= jQuery(this)[0].scrollHeight) {
                    $scope.totalLimit += 10;
                    elem.autocomplete.focusout();
                }
            })

            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)
                {
                    // Try to select the first one if it's the only one
                    var $children = jQuery(this).data('autocomplete').menu.element.children();
                    if ($children.size() == 1)
                    {
                    }/*else{
                        var item = '';
                        var childs = $children.toArray();
                        for(var i = 0; i< $children.length; i++){

                            if(event.target.value.toLowerCase().trim() === childs[i].innerText.toLowerCase().trim()){
                                item = $children.eq(i);
                            }
                        }
                        if(item !== '')
                            jQuery(this).data('autocomplete').menu.focus(null, item);
                    }*/
                }
            }).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;})

            $scope.totalLimit = 50;

  };

我除了延迟加载将正常工作 - 这意味着当我向下滚动列表时 - 会有 10 多个项目呈现到列表中。enter link description here

Answer 1

经过深入研究，我找到了解决方案 解决方案的参考是 http://jsfiddle.net/LesignButure/

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

页面未呈现的假设是错误的，因为自动完成的生命周期是 - 1.totalLimit 设置限制列表 2. setAutoCompletProdectDwonloadDoc 被激活并配置自动完成的结构 3. 列表呈现 4. 向下滚动后-totalLimit chaged 和组件被渲染但列表没有改变，因为自动完成已经运行的“打开”功能。 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;
             };
  };