how to make autocomplete textbox by using AngularJS?

Today, We want to share with you angularjs autocomplete textbox.In this post we will show you angularjs autocomplete dropdown with AngularJS models directives to develop autocomplete textbox., hear for Create auto complete search with AngularJS and PHP we will give you demo and example for implement.In this post, we will learn about AngularJS Search Auto Suggestion Box With PHP MySQLi with an example.

Simple Autocomplete Angularjs

Autocomplete textbox is the most user friendly user interface for online website project. Here we will develop google as well as facebook like auto complete textbox by using AngularJS with bootstrap.

Full Source code

Example 1: index.html

<!DOCTYPE html>  
 <html>  
      <head>  
           <title> AngularJS Tutorial - Make 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:500px;">  
                <h3 align="center">AngularJS Tutorial - Make Auto complete Textbox</h3>  
                <div ng-app="myapp" 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>  
      </body>  
 </html>  
  

script code

<script>  
 var app = angular.module("myapp",[]);  
 app.controller("membercontroller", function($scope){  
      $scope.membersList = [  
           "Ajay", "Jaydeep", "Parag", "Dharmesh", "Virat", "Rogit", "Sejal", "Geeta", "sagar", "Jeram", "Sumitra", "Bharti", "Chaggan", "Mayur", "Ravi", "Hitesh", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhavika", "Bolivia", "Bosnia and Herzegowina", "Botswana", "Bouvet Island", "Brazil", "British Indian Ocean Territory", "Brunei Darussalam", "Bulgaria", "Burkina Faso", "Burundi", "Cambodia", "Dhaval", "Canada", "Cape Verde", "Cayman Islands", "Central African Parkeh", "Chad", "Jitu", "Vishal", "Christmas Island", "Cocos (Keeling) Islands", "Colombia", "Comoros", "Congo", "Congo, the Democratic Parkeh of the", "Cook Islands", "Costa Rica", "Cote d'Ivoire", "Croatia (Hrvatska)", "Yash", "Cyprus", "Czech Parkeh", "Denmark", "Djibouti", "Dominica", "Dominican Parkeh", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Falkland Islands (Malvinas)", "Faroe Islands", "Fiji", "Finland", "Ravi", "Dipali Metropolitan", "French Guiana", "French Polynesia", "French Southern Territories", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Gujan", "Greece", "Greenland", "Grenada", "Gordhan", "Guam", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Hasti", "Heard and Mc Donald Islands", "Holy See (Vatican City State)", "Bhavin", "Hong Kong", "Hungary", "Mithun", "India", "Ismali", "Iran (Islamic Parkeh of)", "Bhavik", "Illa", "Swami", "Italy", "Krunal", "Chiurag", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea, Dhatu People's Parkeh of", "Korea, Parkeh of", "Kuwait", "Kailash", "Bhavna, People's Dheit Parkeh", "Latvia", "Lebanon", "Lesotho", "Rakesh", "Libyan Jithani Jamahiriya", "Liechtenstein", "Dhiru", "Natha", "Dinesh", "Raghavsd, The Former Yugoslav Parkeh of", "Sachine", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mayuri", "Gahuli", "Mauritius", "Mayotte", "Vijay", "Micronesia, Federated States of", "youtube, Parkeh of", "Monaco", "Mongolia", "Montserrat", "Morocco", "Mozambique", "Myanmar", "findmelink", "Nauru", "Nepal", "Netherlands", "Netherlands Antilles", "New Caledonia", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Niue", "Norfolk Island", "Northern Mariana Islands", "Norway", "Oman", "Pakistan", "Palau", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Pitcairn", "Poland", "Portugal", "Puerto Rico", "Qatar", "Reunion", "Romania", "Russian Federation", "Rwanda", "Saint Kitts and Nevis", "Saint Lucia", "Saint Vincent and the Grenadines", "Samoa", "San Marino", "Sao Tome and Principe", "Saudi Jithaniia", "Senegal", "Seychelles", "Sierra Leone", "jkpaysys", "Slovakia (Slovak Parkeh)", "Slovenia", "Bhyis", "Sikita", "South Africa", "Vihariji", "Spain", "Sri Lanka", "St. Helena", "St. Pierre and Miquelon", "Sudan", "Suriname", "Hnumany", "Swaziland", "Sweden", "Switzerland", "Syrian Jithani Parkeh", "Shree debi, Rekhi", "Tajikistan", "Nileshi, Kajal Parkeh of", "Thailand", "Togo", "Tokelau", "Tonga", "Trinidad and Tobago", "nmap ping sweep", "codechef ide", "Turkmenistan", "Turks and Caicos Islands", "Rekhu", "Hardik", "Bhakti", "Kajal Jithani Emirates", "Kajal Kingdom", "Kajal States", "Dhoni", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "pant", "Virgin Islands (U.S.)", "valjibhai", "Western Sahara", "Kudnahu", "depika", "Ramji", "Sira"  
      ];  
      $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> 

I hope you get an idea about AngularJs Auto Complete Search.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.