Autocomplete AngJS

In this example below you will see how to do a Autocomplete AngJS with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Jussic, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Jussic ©

Technologies

  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Autocomplete AngJS</title>
  
  
  
  
  
</head>

<body>

   <html>  
      <head>  
           <title>Webslesson Tutorial | AngularJS Tutorial - Make Autocomplete 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:500px;">  
                <h3 align="center">Autocomplete Textbox</h3>  
                <div ng-app="myapp" ng-controller="usercontroller">  
                     <label>Enter Insurance Name</label>  
                     <input type="text" name="country" id="country" ng-model="country" ng-keyup="complete(country)" class="form-control" />  
                     <ul class="list-group" ng-model="hidethis" ng-hide="hidethis">  
                          <li class="list-group-item" ng-repeat="countrydata in filterCountry" ng-click="fillTextbox(countrydata)">{{countrydata}}</li>  
                     </ul>  
                </div>  
           </div>  
      </body>  
 </html>  
 <script>  
 var app = angular.module("myapp",[]);  
 app.controller("usercontroller", function($scope){  
      $scope.insuranceList = [  
           "Liberty Mutual",
"Lincoln National Corporation",
"Manhattan Life Insurance Company",
"Markel Corporation",
"MassMutual",
"Mass Health Insurance",
"MBBS ( Mohtarma Bainzeer Bhutto Shaheed )",
"Merchants Insurance Group",
"Mercury Insurance Group",
"MetLife",
"Modern Woodmen of America",
"Mutual of Omaha",
"National Life"
      ];  
      $scope.complete = function(string){  
           $scope.hidethis = false;  
           var output = [];  
           angular.forEach($scope.insuranceList, function(country){  
                if(country.toLowerCase().indexOf(string.toLowerCase()) >= 0)  
                {  
                     output.push(country);  
                }  
           });  
           $scope.filterCountry = output;  
      }  
      $scope.fillTextbox = function(string){  
           $scope.country = string;  
           $scope.hidethis = true;  
      }  
 });  
 </script>
  
  

</body>

</html>

Comments