autocomplete

by gabriela b

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-app='MyModule'>
    <div ng-controller='DefaultCtrl'>
        
        
        <div ng-repeat='item in items'>
              {{item}}     
            <input auto-complete ui-items="names" ng-model="selected">
            <input id={{item.ref}} auto-complete ui-items="names2" test="item.ref" ng-model="selected2"> {{item.ref}}
           </div>    
    </div>
</div>
        
<script type="text/javascript">
		$("input,select").bind("keydown", function (event) {
			if (event.which === 13) {
				event.stopPropagation();
				event.preventDefault();
				$(':input:eq(' + ($(':input').index(this) + 1) + ')').focus();
			}
		});
    	
</script>

CSS

.ui-menu .ui-menu-item:hover {
	background-color: #272b30;
}

.ui-menu {
	width: 150px !important;
	position: relative;
	top: -590.59375px;
	left: 1198.84375px;
	position: absolute;
	top: 100%;
	/*left: 0;*/
	z-index: 1000;
	display: none;
	/*float: left;*/
	min-width: 160px;
	padding: 5px 0;
	margin: 2px 0 0;
	font-size: 14px;
	list-style: none;
	background-color: #3a3f44;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	background-clip: padding-box;
	text-align: center;

}

JavaScript

function DefaultCtrl($scope) {
    $scope.items = [
        {'ref' : 'd',
         'ref2' :'d'},
         {'ref' : 'd2',
         'ref2' :'d2'}       
    ];
    
    $scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];
    $scope.names2 = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];
}


angular.module('MyModule', []).directive('autoComplete', function($timeout) {
    return function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                source: scope[iAttrs.uiItems],
                select: function() {
                    $timeout(function() {
                      iElement.trigger('input');
                        //document.getElementById(iAttrs.inputId).focus();
                        alert(iAttrs);
                        var idInput = '#'+iAttrs.inputId;
                       $(idInput).focus();
                    }, 0);
                }
            });
    };
});