<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"> </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/>
(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);