index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | //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" /> <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> |
