April 4, 2017
AutoComplete using AngularJS
Hi, friends in this post we going to see how to do autocomplete using AngularJS. Autocomplete textbox is the extremely user-friendly for a web application. Really you know it’s an essential feature that you’ll often require while working with the textboxes. It automatically presents a list of words when you enter a letter in the textbox. Here we have set individual textbox and using AngularJS we have store all the car names in an array format and we going to execute with on ng-keyup directive function when we type word something on the textbox then this function will search the cars name according to letter. In this post, I’ll share the best example on how to implement AutoComplete feature in AngularJS.
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 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>SoftAOX | AutoComplete using AngularJS</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head> <body> <div class="container"> <h1 align="center">AutoComplete using AngularJS</h1> <hr/> <div ng-app="sa_autocomplete" ng-controller="controller"> <label>Select your car Name</label> <input type="text" name="car" id="car" ng-model="car" ng-keyup="total(car)" placeholder="Search your car" class="form-control" /> <ul class="list-group" ng-hide="hideinfo"> <li class="list-group-item list-group-item-success" ng-repeat="carinfo in search_car" ng-click="choose_textbox(carinfo)">{{carinfo}}</li> </ul> <br/> <p>You Selected <b>{{ car }}</b></p> </div> </div> <!-- Scripts --> <script> var app = angular.module("sa_autocomplete", []); app.controller("controller", function($scope) { $scope.cars_list = [ "Acura", "Alfa Romeo", "Aston Martin", "Audi", "Bentley", "BMW", "Bugatti", "Buick", "Cadillac", "Chevrolet", "Chrysler", "Citroen", "Dodge", "Ferrari", "Fiat", "Ford", "Geely", "General Motors", "GMC", "Honda", "Hyundai", "Infiniti", "Jaguar", "Jeep", "Kia", "Koenigsegg", "Lamborghini", "Land Rover", "Lexus", "Maserati", "Mazda", "McLaren", "Mercedes-Benz", "Mini", "Mitsubishi", "Nissan", "Pagani", "Peugeot", "Porsche", "Ram", "Renault", "Rolls Royce", "Suzuki", "Tata Motors", "Tesla", "Toyota", "Volkswagen", "Volvo" ]; $scope.total = function(string) { $scope.hideinfo = false; var output = []; angular.forEach($scope.cars_list, function(car) { if (car.toLowerCase().indexOf(string.toLowerCase()) >= 0) { output.push(car); } }); $scope.search_car = output; } $scope.choose_textbox = function(string) { $scope.car = string; $scope.hideinfo = true; } }); </script> </body> </html> |
