AngularJS Autocomplete

created by ozkary.com

by ozkary

HTML

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<div ng-app="app">   
    <div ng-controller="customerSearchCtrl as ctrl" class="body-content panel-body">
        <h5 class="text-center text-info">Customer search by ozkary.com</h5>        
        
         <div class="container-fluid">
            <div class="row">
                <i class="fa fa-user fa-2x">&nbsp;</i><b>{{ctrl.client.id}} {{ctrl.client.name}}</b>
            </div>
            <hr />
            <div class="row">
                <div class="control-group">
                    <div class="controls">
                        <label class="control-label">Customer Name Search</label>
                        <input client-auto-complete class="form-control" ng-model="ctrl.client.name" placeholder="enter name with letter O" type="text">
                            
                            <input client-auto-complete class="form-control" ng-model="ctrl.client.id" type="hidden">
                    </div>
                </div>
            </div>
            <div class="row"><br /></div>            
        </div>
                                   
    </div>   
   
    
</div>
<br/>

JavaScript

(function (angular) {
            'use strict';
            var appName = 'app';
            var app = angular.module(appName, []);
            app.directive('clientAutoComplete',['$filter',clientAutoCompleteDir]);     
            app.controller('customerSearchCtrl', ['$scope',customerSearchCtrl]);

                      
            //controllers
            function customerSearchCtrl($scope) {
               
                var ctrl = this;
                ctrl.client ={name:'', id:''};
                $scope.dataSource = [{name:'Oscar',id:1000},{name:'Olgina',id:2000},{name:'Oliver',id:3000},{name:'Orlando',id:4000},{name:'Osark',id:5000}, {name:'Osos',id:5000}, {name:'Oscarlos',id:5000}];
                            
            }
    
    		
        function clientAutoCompleteDir($filter) {
            return {
                restrict: 'A',       
                link: function (scope, elem, attrs) {
                    elem.autocomplete({
                        source: function (request, response) {

                            //term has the data typed by the user
                            var params = request.term;
                            
                            //simulates api call with odata $filter
                            var data = scope.dataSource;                                     
                            if (data) { 
                                var result = $filter('filter')(data, {name:params});
                                angular.forEach(result, function (item) {
                                    item['value'] = item['name'];
                                });                       
                            }
                            response(result);

                        },
                        minLength: 1                       
                    });
                }

            };
        }
           

})(angular);