index.html
//index.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Auto complete Textbox</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
li{
cursor:pointer;
}
li:hover {
background-color:#f9f9f9;
}
</style>
</head>
<body>
<br /><br />
<div class="container" style="width:600px;">
<h1 align="center">AngularJS Auto complete Textbox</h1>
<div ng-app="angularautocomplete" ng-controller="membercontroller">
<label>Enter Member Name</label>
<input type="text" name="members" id="members" ng-model="members" ng-keyup="complete(members)" class="form-control" />
<ul class="list-group" ng-model="hidethis" ng-hide="hidethis">
<li class="list-group-item" ng-repeat="membersdata in filterMember" ng-click="fillTextbox(membersdata)">{{membersdata}}</li>
</ul>
</div>
</div>
<script>
var app = angular.module("angularautocomplete",[]);
app.controller("membercontroller", function($scope){
$scope.membersList = [
"Airi Satou", "Angelica Ramos", "Ashton Cox", "Bradley Greer", "Brenden Wagner", "Brielle Williamson", "Bruno Nash", "Caesar Vance", "Cara Stevens", "Cedric Kelly"
];
$scope.complete = function(string){
$scope.hidethis = false;
var output = [];
angular.forEach($scope.membersList, function(members){
if(members.toLowerCase().indexOf(string.toLowerCase()) >= 0)
{
output.push(members);
}
});
$scope.filterMember = output;
}
$scope.fillTextbox = function(string){
$scope.members = string;
$scope.hidethis = true;
}
});
</script>
</body>
</html>
