Autocomplete

by TheoI

HTML

<link rel="stylesheet" href="https://rawgithub.com/theoinglis/controls/master/build/autocomplete/autocomplete.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div class='app-container' ng-controller='Ctrl'>
  <autocomplete-input selected-item='selectedItem' 
                      options='options'
                      items='items' >
  </autocomplete-input>
</div>

<script defer  src="https://rawgithub.com/theoinglis/controls/master/build/autocomplete/autocomplete.min.js"></script>

CSS

.autocomplete-input {
    min-width: 150px;
}

JavaScript

angular.module('app', ['Controls','Helpers'])
    .controller('Ctrl',
        ['$scope',
         function($scope) {
             $scope.items = [
                 {name: 'Michael Jordan'},
                 {name: 'Kobe Bryant'},
                 {name: 'Lebron James'},
             ];
             $scope.options = {
                 placeholder: 'Choose the best player',
                 // Other options:
                 // selectedItemText: '',
                 // propName: 'name', // The property name on the object to use for displaying in the dropdown
                 // isShowing: false, // Whether the dropdown is showing
                 // closeOnSelect: true, // Whether the dropdown should close on select
                 // disableCreate: false, // Whether the user is allowed to create entries
                 // select: // function that overwrite the default select behaviour
                 // create: // function that overwrites the default create behaviour
             };
         }]);

angular.module('Controls', []);
angular.module('Helpers', []);