IncRev Corporation » Angular material

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

<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>

<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-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

$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.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

<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>

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

<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>

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:

<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>

<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-item-template>

<md-not-found>

No Person matching "{{searchText}}" were found.

</md-not-found>

</md-autocomplete>

How to set Minimum Length of Search Text:

<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>

<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-item-template>

</md-autocomplete>

How to set Cache Mode Enabled:

<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>

<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-item-template>

</md-autocomplete>

The Complete Source Code of HTML with AngularJS

<!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>

<!DOCTYPE html>

<html>

<body>

<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-item-template>

</md-autocomplete>

</md-content>

<br/>

</div>

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>

The above Source Code is for Local Data Source, if you need a source code for a Remote Data Source kindly replace the <script> block to the specified Remote <script> block, which is briefly explained in the above.

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…

The Angular Material has already become popular and seems to gain a great acceptance worldwide as a general design guideline among the Web. It provides a set of reusable, well-tested, and accessible UI components based on the Material Design system.

https://material.angularjs.org/

Inconsistent UI for md-input fields & md-chips with md-autocomplete

For md-input & md-autocomplete the form fields have floating label (i.e. when the user focuses the textbox or autocomplete the label jumps to top & provides space for entering values ) whereas the md-chips control not providing the floating label option, it just clears the label value and you can type in your values.

https://material.angularjs.org/latest/#/demo/material.components.input

https://material.angularjs.org/latest/#/demo/material.components.chips

To provide the consistent UI effect, here we are going to customize the md-chips with md-autocomplete control. In md-autocomplete control instead of placeholder property we are going to use md-floating-label property.

<md-chips ng-model="ctrl.selectedCities" md-autocomplete-snap="" md-require-match="">
<md-autocomplete md-selected-item="ctrl.selectedItem" md-search-text="ctrl.searchText" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.name" md-floating-label="Search for a city">
<span md-highlight-text="ctrl.searchText"><strong style="font-weight: bold !important;" data-mce-style="font-weight: bold !important;">{{</strong>item.name<strong style="font-weight: bold !important;" data-mce-style="font-weight: bold !important;">}}</strong> :: <strong style="font-weight: bold !important;" data-mce-style="font-weight: bold !important;">{{</strong>item.country<strong style="font-weight: bold !important;" data-mce-style="font-weight: bold !important;">}}</strong></span>

</md-autocomplete>

<md-chip-template>

<span>

<strong><strong style="font-weight: bold !important;" data-mce-style="font-weight: bold !important;">{{</strong>$chip.name<strong style="font-weight: bold !important;" data-mce-style="font-weight: bold !important;">}}</strong></strong>

<em>(<strong style="font-weight: bold !important;" data-mce-style="font-weight: bold !important;">{{</strong>$chip.country<strong style="font-weight: bold !important;" data-mce-style="font-weight: bold !important;">}}</strong>)</em>

</span>

</md-chip-template>

</md-chips>

<md-chips ng-model="ctrl.selectedCities" md-autocomplete-snap="" md-require-match="">

<md-autocomplete md-selected-item="ctrl.selectedItem" md-search-text="ctrl.searchText" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.name" md-floating-label="Search for a city">

<span md-highlight-text="ctrl.searchText"><strong style="font-weight: bold !important;" data-mce-style="font-weight: bold !important;">{{</strong>item.name<strong style="font-weight: bold !important;" data-mce-style="font-weight: bold !important;">}}</strong> :: <strong style="font-weight: bold !important;" data-mce-style="font-weight: bold !important;">{{</strong>item.country<strong style="font-weight: bold !important;" data-mce-style="font-weight: bold !important;">}}</strong></span>

</md-autocomplete>

<md-chip-template>

<span>

<em>(<strong style="font-weight: bold !important;" data-mce-style="font-weight: bold !important;">{{</strong>$chip.country<strong style="font-weight: bold !important;" data-mce-style="font-weight: bold !important;">}}</strong>)</em>

</span>

</md-chip-template>

</md-chips>

By using md-floating-label with md-autocomplete we will be able to get the floating label, but the problem is with selected item styles & some padding effects.

We can fix these issues by customizing the angular-material.css

.md-chips md-autocomplete md-input-container label:not(.md-no-float), .md-chips md-autocomplete md-input-container .md-placeholder:not(.md-select-label) { margin-top: -23px; }

.md-chips md-autocomplete md-input-container .md-input { border-width: 0; }

.md-chips md-autocomplete md-input-container.md-input-focused .md-input, .md-chips md-autocomplete md-input-container .md-input.ng-invalid.ng-dirty { border-width: 0; }

.md-chips .md-chip-input-container md-autocomplete input { position: relative; border: 0px !Important; margin-left: 0px !important; }

.md-chips .md-chip-input-container md-autocomplete input:focus { position: relative; margin-left: 0px !important; }

.md-chips md-autocomplete md-input-container label:not(.md-no-float), .md-chips md-autocomplete md-input-container .md-placeholder:not(.md-select-label) { margin-top: -23px; }

.md-chips md-autocomplete md-input-container .md-input { border-width: 0; }

.md-chips md-autocomplete md-input-container.md-input-focused .md-input, .md-chips md-autocomplete md-input-container .md-input.ng-invalid.ng-dirty { border-width: 0; }

.md-chips .md-chip-input-container md-autocomplete input { position: relative; border: 0px !Important; margin-left: 0px !important; }

.md-chips .md-chip-input-container md-autocomplete input:focus { position: relative; margin-left: 0px !important; }

Hurray!! We have done it. Hopefully this feature will be added to md-chips control in near future.

You can download the sample project from the github.

https://github.com/IncRevCorp/Angular-FloatingLabelChips

M	T	W	T	F	S	S
« Aug
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

Angular material

Usage of md-autocomplete in Angular Material

Core Features of md-autocomplete

Advance Features of md-autocomplete

Item Not Found:

How to set Minimum Length of Search Text:

How to set Cache Mode Enabled:

The Complete Source Code of HTML with AngularJS

Conclusion:

Floating label support for md-chips in AngularJS

Recent Posts

Categories

Calendar

Angular material

Usage of md-autocomplete in Angular Material

Core Features of md-autocomplete

Advance Features of md-autocomplete

Item Not Found:

How to set Minimum Length of Search Text:

How to set Cache Mode Enabled:

The Complete Source Code of HTML with AngularJS

Conclusion:

Floating label support for md-chips in AngularJS

Recent Posts

Categories

Calendar

Popular tags