Angular自定义指令基本输入过滤器不能正常工作，只显示第一个匹配实例

Question

我正在为输入字段编写自定义指令，当您开始键入时，它将显示一个与您键入的内容相匹配的筛选列表：

angular.module('plunker', [])
.controller('AnimateCtlr', function($scope){
  $scope.data = ['apple', 'orange', 'banana', 'grapes', 'lemon', 'strawberry'];
    $scope.filteredData = [];
})
.directive('basicInputFilter', function($filter){
  var linker = function (scope, element, attrs) {


        element.on('input', function(event, combo, selection){
             var expression = $(this).text();
             expression = scope.filter;
             console.log(expression);
             scope.$apply(function(){

                scope.filteredData = $filter('filter')(scope.data, expression);
             });
        });
    };

    return {
        restrict: 'A',
        link: linker,
        scope: {
            data:'=',
            filteredData:'=',
            filter: '='
        }
    };
});

从我观察到的情况来看，它只显示匹配的第一个实例，而不是所有可能的匹配结果，如果匹配不是第一个字母，则不会显示结果。 这可能有什么不对？

Plunker是： http ：//plnkr.co/edit/REDJywQljTmtv2d3ZnD2？p = preview

Answer 1

这与Angular无关，而是与浏览器如何实现datalist元素无关。

例如，我上次检查时，Chrome，Opera和IE都基于“开始时”过滤，而Firefox则使用“包含”。

这意味着如果使用$filter来设置正确的选项元素并不重要，因为当用户输入输入时，浏览器将在其上应用自己的过滤器。

我强烈建议暂时离开datalist，而是寻找一个在自动完成元素中实现所需功能的库。