Q:

Angular custom directive basic input filter not working properly, only show 1st instance of match

I am writing a custom directive for input field , when you start typing, it will show a filtered list that would match what you are typing: 
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: '='
        }
    };
});

From what i observed, it will only show the 1st instance of matching, not all possible matching result, and will show no result if matching is not first letter. What can be wrong here?
Plunker is : http://plnkr.co/edit/REDJywQljTmtv2d3ZnD2?p=preview

A:

This has nothing to do with Angular, but with how the browsers implement the datalist element.
For example, last time I checked, Chrome, Opera and IE all filter based on "starts with", while Firefox uses "contains".
This means that it doesn't matter if you use $filter to set up the correct option elements, since when the user types in the input, the browser will apply its own filter on top of that.
I strongly recommend to move away from datalist for now and instead look for a library that implements the features you need in an autocomplete element.

