Highly unobtrusive typeahead directive for AngularJS: ngxSouffleur

ngxSouffleur.css

.ngx-souffleur {
  position: relative;
}

.ngx-souffleur div, 
.ngx-souffleur input {
  position: absolute; 
  top: 0; 
  left: 0;
}

.ngx-souffleur div {
  color: #ccc;
}

.ngx-souffleur input {
  background-color: transparent;
}

ngxSouffleur.js

(function () {
  
  /**
   * Highly unobtrusive typeahead directive:
   * <ngx-souffleur src ng-model event child-class input-id>
   */
  var ngxSouffleur = function () {
    return {
    restrict: 'E',
      replace: true,
      scope: {
        model: '=ngModel',
        event: '=',
        class: '@childClass',
        id: '@inputId',
        src: '='
      },
      controller: function($scope) {
        $scope.souffleur = '';

        /* *
         * Is triggered on every keypress and reacts to keyCode 9 ("tab") only.
         * Checks if the souffleur is currently suggesting something, if so fills it in
         * and triggers the specified event.
         */
        $scope.keydown = function( $event ) {
          if ( typeof $scope.model === 'undefined' || 
               $scope.souffleur === $scope.model ||
               $scope.souffleur === '' ||
               $scope.model === '' || 
               $event.keyCode != 9 ||
               $event.shiftKey ) return;

          $event.preventDefault();
          $scope.model = $scope.souffleur;
        };

        /* *
         * Watch the model and look for an appropriate suggestion in the specified source array.
         */
        $scope.$watch('model', function(n, o) {
          $scope.souffleur = '';
          if ( typeof input === 'undefined' || typeof $scope.src === 'undefined' || input === '' )
            return;

          for ( var i = 0, len = $scope.src.length; i < len; i++ ) {
            if ( ($scope.src[i] + '').substring(0, input.length).toLowerCase() == input.toLowerCase() )
              return $scope.souffleur = input + ($scope.src[i] + '').substring(input.length);
          }
        });

      },
      template: 
        '<div class="ngx-souffleur">'+
          '<div class="{{class}}">{{souffleur}}</div>'+
          '<input type="text" class="{{class}}" id="{{id}}" ng-model="model" ng-keydown="keydown($event)">'+
        '</div>'
    };
  };

  angular.module('myModule').directive('ngxSouffleur', ngxSouffleur);

}());