Question

自动完成是否支持来自远程源的无限滚动？场景是这样的。用户键入几个字母，自动完成功能会过滤掉结果。结果仍然太大，无法适应结果区域。用户想要滚动“返回的结果”。我发现这种情况很直接，但我没有在网上找到任何内容。

请告知。

Answer 1

我想我们需要根据您的要求使用自定义指令。

我创建了一个指令，它实际上将滚动事件绑定在＆＃34; md-virtual-repeat-container＆＃34;它在渲染后保存项目列表。

<强> JS

您的指示如下。当用户在滚动结束时到达时，该指令的目的是获取滚动事件和调用附加功能。条件＆＃34;新日期（）。getTime（） - 现在＆gt; 100＆＃34;将充当节流API调用。如果要在100毫秒的用户操作之间限制API调用，可以将节流时间从100毫秒更改为任何毫秒。

.directive('lazyLoadData', function($compile) {
     return {
         link: function(scope, el, attrs) {
            var now = new Date().getTime();
            var rep = angular.element(document.getElementsByClassName("md-virtual-repeat-scroller"));
            rep.on('scroll', function(evt){
               if (rep[0].scrollTop + rep[0].offsetHeight >= rep[0].scrollHeight)
                  if (new Date().getTime() - now > 1000) {                  
                     now = new Date().getTime();
                     scope.$apply(function() { 
                        scope.$eval(attrs.lazyLoadData); 
                     });
                  }                  
            });
         }
    }; 
});

<强> HTML 您的HTML将如下所示，

<md-autocomplete flex
                 md-selected-item="ctrl.selectedItem"
                 md-search-text="searchText"
                 md-items="item in querySearch(searchText)"
                 md-item-text="item.login"
                 md-delay="300"
                 md-floating-label="Search Github Users"
                 lazy-load-data="querySearch()" <!--New directive will go here -->
>
   <div layout="row" class="item" layout-align="start center">
      <img ng-src="{{item.avatar_url}}" class="avatar" />
      &nbsp;&nbsp;
      <span md-highlight-text="searchText">{{item.login}}</span>  
   </div>
</md-autocomplete>

这是 DEMO

*请注意目前我将相同的数据附加到我的记录数组中，因为我没有实际的API。但您可以扩展API以根据搜索到的文本获取分页记录。请参阅https://github.com/davidchin/angular-endless-scroll 或 http://www.dotnetawesome.com/2016/03/infinite-scroll-for-facebook-like-pagination-angularjs.html

Answer 2

基于 user3249448 的答案，我进行了一些改进，可以通过参数传递element class和load function。

.directive('scrollDetector', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                let e = element;
                if (attrs.scrollDetectorElementClass) {
                    e = angular.element(document.getElementsByClassName(attrs.scrollDetectorElementClass)); 
                }
                var raw = e[0];
                e.bind('scroll', function () {
                    if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                        scope.$apply(attrs.scrollDetector);
                    }
                });
            }
        };
    });

和 html

<md-autocomplete flex
             md-selected-item="ctrl.selectedItem"
             md-search-text="searchText"
             md-items="item in querySearch(searchText)"
             md-item-text="item.login"
             md-delay="300"
             md-floating-label="Search Github Users"
             lazy-load-data="querySearch()"
             scroll-detector="controller.function()"
             scroll-detector-element-class="md-virtual-repeat-scroller"
>
   <div layout="row" class="item" layout-align="start center">
      <img ng-src="{{item.avatar_url}}" class="avatar" />
      &nbsp;&nbsp;
      <span md-highlight-text="searchText">{{item.login}}</span>  
   </div>
</md-autocomplete>

Angular Material自动完成无限滚动，带有$ http请求

2 个答案: