Multi Autocomplete

by TheoI

HTML

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

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

CSS

.autocomplete-input {
    min-width: 150px;
}
.aim-item {
	margin: 0px 2px;
}

.aim-selected-item {
	padding-left: 3px;

	border: 1px solid black;
	border-radius: 2px 10px 10px 2px;

	background-color: white;
}

.aim-selected-item-btn-delete {
	margin: -1px;
	margin-left: 3px;

	border: 1px solid transparent;
	border-radius: 10px;

	background-color: transparent;

	outline: none !important;
}
.aim-selected-item-btn-delete:hover {
	border: 1px solid black;
	
	background-color: red;
}

JavaScript

angular.module('app', ['Controls','Helpers'])
    .controller('Ctrl',
        ['$scope',
         function($scope) {
             $scope.selectedItems = [];
             $scope.items = [
                 {name: 'Michael Jordan'},
                 {name: 'Kobe Bryant'},
                 {name: 'Lebron James'},
             ];
             $scope.options = {
                 placeholder: 'Choose the best player',
                 disableCreate: true,
                 // 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', []);