AngularJS is one of the most popular Client side Java Script languages today and there are many reasons for this. It has many qualities that make it suitable for development for users at most all levels. Let’s discuss how efficiently use the md-autocomplete in Angular Material.
Angular Material md-autocomplete introduces a special input component with a drop-down of all possible matches to a custom query. This component allows us to provide real-time suggestions as the user types in the input area.
md-autocomplete may get the input source via local object or from remote data source. Both are having different paradigms for consuming Suggestion data.
Core Features of md-autocomplete
Let us see the basic syntax of md-autocomplete
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<md-autocomplete md-selected-item="selectedItem" md-search-text="searchText" md-items="item in searchTextChange(searchText)" md-item-text="item.name" placeholder="Which is your favorite Person?"> <md-item-template> <span md-highlight-text="searchText" md-highlight-flags="^i"> {{item.name}} </span> </md-item-template> </md-autocomplete> |
All the attributes of md-autocomplete is briefly explained in the Angular Material website https://material.angularjs.org/latest/api/directive/mdAutocomplete
Consider the Data is from Local as like below
1 2 3 4 5 6 7 8 9 10 11 12 |
$scope.Person = [ {"sno":1, "name":"Person One"}, {"sno":2, "name":"Person Two"}, {"sno":3, "name":"Person Three"}, {"sno":4, "name":"Person Four"}, {"sno":5, "name":"Person Five"}, {"sno":6, "name":"Person Six"}, {"sno":7, "name":"Person Seven"}, {"sno":8, "name":"Person Eight"}, {"sno":9, "name":"Person Nine"}, {"sno":10, "name":"Person Ten"} ]; |
Now see how the AngularJS should be for a Local Data
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 |
<script> var app = angular.module('myApp', ['ngMaterial']); app.controller('myCtrl', function ($scope) { $scope.searchText = ""; $scope.selectedItem = []; $scope.Person = [ {"sno":1, "name":"Person One"}, {"sno":2, "name":"Person Two"}, {"sno":3, "name":"Person Three"}, {"sno":4, "name":"Person Four"}, {"sno":5, "name":"Person Five"}, {"sno":6, "name":"Person Six"}, {"sno":7, "name":"Person Seven"}, {"sno":8, "name":"Person Eight"}, {"sno":9, "name":"Person Nine"}, {"sno":10, "name":"Person Ten"} ]; $scope.searchTextChange = function (str) { var tempData = []; angular.forEach($scope.Person, function(item){ if (item.name .toLowerCase(). indexOf(str.toLowerCase()) >=0) { tempData.push(item); } }); return tempData; } }); </script> |
Consider the Data is from Remote from the sample URL https://www.example.com/sample.aspx?token=one
Now see how the AngularJS should be for a Remote Data
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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<script> var app = angular.module('myApp', ['ngMaterial']); app.controller('myCtrl', function ($scope, $http, $q, GetPersonService){ $scope.searchText = ""; $scope.selectedItem = []; $scope.searchTextChange = function (str) { return GetPersonService.getPerson(str); } }); app.factory('GetPersonService', function ($http, $q) { return { getPerson: function(str) { // the $http API is based on the deferred/promise APIs exposed by the $q service // so it returns a promise for us by default var url = "https://www.example.com/sample.aspx?token="+str; return $http.get(url) .then(function(response) { if (typeof response.data === 'object') { return response.data; } else { // invalid response return $q.reject(response.data); } }, function(response) { // something went wrong return $q.reject(response.data); }); } }; }); </script> |
In Remote Data, we should prefer .then instead of .success
- .then() – full power of the promise API but slightly more verbose
- .success() – doesn’t return a promise but offers slightly more convenient syntax
.then() – the $http API is based on the deferred/promise APIs exposed by the $q service, so it returns a promise for us by default.
Advance Features of md-autocomplete
Item Not Found:
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 |
<md-autocomplete md-selected-item="selectedItem" md-search-text="searchText" md-items="item in searchTextChange(searchText)" md-item-text="item.name" placeholder="Which is your favorite Person?"> <md-item-template> <span md-highlight-text="searchText" md-highlight-flags="^i"> {{item.name}} </span> </md-item-template> <md-not-found> No Person matching "{{searchText}}" were found. </md-not-found> </md-autocomplete> |
How to set Minimum Length of Search Text:
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 |
<md-autocomplete md-min-length="3" md-selected-item="selectedItem" md-search-text="searchText" md-items="item in searchTextChange(searchText)" md-item-text="item.name" placeholder="Which is your favorite Person?"> <md-item-template> <span md-highlight-text="searchText" md-highlight-flags="^i"> {{item.name}} </span> </md-item-template> </md-autocomplete> |
How to set Cache Mode Enabled:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<md-autocomplete md-no-cache="true" md-selected-item="selectedItem" md-search-text="searchText" md-items="item in searchTextChange(searchText)" md-item-text="item.name" placeholder="Which is your favorite Person?"> <md-item-template> <span md-highlight-text="searchText" md-highlight-flags="^i"> {{item.name}} </span> </md-item-template> </md-autocomplete> |
The Complete Source Code of HTML with AngularJS
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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<!DOCTYPE html> <html> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <!-- Angular Material Library --> <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> <p>Person to Select:</p> <md-content> <md-autocomplete md-selected-item="selectedItem" md-search-text="searchText" md-items="item in searchTextChange(searchText)" md-item-text="item.name" placeholder="Who is your favorite Person?"> <md-item-template> <span md-highlight-text="searchText" md-highlight-flags="^i"> {{item.name}} </span> </md-item-template> </md-autocomplete> </md-content> <br/> </div> <script> var app = angular.module('myApp', ['ngMaterial']); app.controller('myCtrl', function ($scope) { $scope.searchText = ""; $scope.selectedItem = []; $scope.Person = [ {"sno":1,"name":"Person One"}, {"sno":2,"name":"Person Two"}, {"sno":3,"name":"Person Three"}, {"sno":4,"name":"Person Four"}, {"sno":5,"name":"Person Five"}, {"sno":6,"name":"Person Six"}, {"sno":7,"name":"Person Seven"}, {"sno":8,"name":"Person Eight"}, {"sno":9,"name":"Person Nine"}, {"sno":10,"name":"Person Ten"} ]; $scope.searchTextChange = function (str) { var tempData = []; angular.forEach($scope.Person, function(item){ if (item.name.toLowerCase().indexOf($scope.searchText.toLowerCase()) >=0) { tempData.push(item); } }); return tempData; } }); </script> </body> </html> |
Conclusion:
This article targets at understanding md-autocomplete programmatically using AngularJS especially for Remote Data Source. This article is intended for the beginner/intermediate level. I hope, this post will solve all your basic functionality implementation of md-autocomplete TextBox of Angular Material. Think Big… Start Small… Do Fast…