JSFiddle - React, Tailwind, and code Playground

by dandoyon

HTML

<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng:app="myApp">
    <div ng-controller="Ctrl">
        <input ui-typeahead="availableUsers" ng-model="email" ng-change="getAvailableUsers()"/><span>{{email}}</span>
    </div>
</div>

JavaScript

angular.module('ui.directives',[])
  .directive('uiTypeahead', function(){
    return {
      require: '?ngModel',
      scope: {
          uiTypeahead: '='
      },
      link: function($scope, element, attrs, controller) {
        if (controller != null) {
            element.bind('change', function() {
                $scope.$apply(function() {
                    controller.$setViewValue(element.val());
                });
            });        
        }
        element.typeahead($scope.uiTypeahead);
      }
    }
  });
    
 angular.module('myApp', ['ui.directives']);

 function Ctrl($scope) {
       $scope.myModel = 'x';
    $scope.typeaheadOptions = {
          source: ['foo', 'bar', 'foobar']
    };
};


function Ctrl($scope) {

    $scope.email = '';

    $scope.availableUsers = [];

    $scope.getAvailableUsers = function() {
        var term = $scope.email;
        if (term.length > 0) {
            $scope.availableUsers = ['foo', 'bar', 'foobar'];
        }
    };
}