MyAutocompleteDirective

index.html

<div ng-app="ExampleAutocomplete">
  <div ng-controller="ExampleCtrl">
    <my-autocomplete on-find="find(substr)" users="users">
    </my-autocomplete>
  </div>
</div>

myautocompletedirective.markdown

MyAutocompleteDirective

A Pen by m0sk1t on CodePen.

License.

script.js

angular.module('ExampleAutocomplete', [])
.factory('FakeAjax', function(){
  var users = [
    { name: 'John' },
    { name: 'Joann' },
    { name: 'Jorge' },
    { name: 'Jack' },
    { name: 'Sara' },
  ];
  String.prototype.tlc = String.prototype.toLowerCase;
  return {
    find: function(substr) {
      return users.filter(function(el){return el.name.tlc().indexOf(substr.tlc()) !== -1;});
    }
  };
})
.directive('myAutocomplete', function(){
  return {
    restrict: 'E',
    scope: {
      users: '=',
      onFind: '&'
    },
    transclude: true,
    template: '<div ng-transclude><input type="text" ng-model="substr" ng-change="onFind({substr:substr})" /><br /><ul><li ng-repeat="u in users">{{u.name}}</li></ul></div>'
  }
})
.controller('ExampleCtrl', ['$scope', 'FakeAjax', function($scope, FakeAjax){
  $scope.users = [];
  $scope.find = function(substr) {
    $scope.users = FakeAjax.find(substr);
  };
}]);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>

style.css

ul, li {
  list-style-type: none;
}