Angular: autocomplete

http://angularjs.org/

by sebmade

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<div ng-controller="MyCtrl">
    <div>jQuery UI integration in AngularJS : creation autocomplete tag</div>
    <div>to test, start by typing a word from availableTags Array</div>
    <div>selection is ? {{name}}</div>
    <div><autocomplete list="availableTags" selection="name"/></div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://docs.angularjs.org/angular-1.0.0.min.js"></script>
<style>

JavaScript

var myApp = angular.module('myApp', []);

myApp.directive('autocomplete', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template: '<input name="autocomplete" type="text"/>',
        link: function(scope, element, attrs) {
                element.autocomplete({
                    source: scope[attrs.list],
                    select: function(event, ui) {
                        scope[attrs.selection] = ui.item.value;
                        scope.$apply();
                    }
                });
        }
    };
});

//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = '';
    $scope.availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
        ];
}