Angular Material - Angular Material AutoComplete - Angular Material Tutorial



Related Tags - angular material , angular 2 material , angular material 2 , angular material design , material angular

What is AutoComplete in Angular Material?

  • md-autocomplete an Angular Directive, is used as a special input control with an inbuilt drop-down to show all possible matches to a custom query.
  • This control acts as a real-time suggestion box as soon as the user types in the input area.
  • angular material tutorials - auto complete

    angular material tutorials - Interactive Output - auto completeExample

  • <md-autocomplete> can be used to provide search results from local or remote data sources .md-autocomplete caches results when performing a query.
  • After the first call, it uses the cached results to eliminate unnecessary server requests or lookup logic and it can be disabled.

Attributes:

Sr.No Parameter & Description
1

* md-items

An expression in the format of item in items to iterate over matches for your search.

2

md-selected-item-change

An expression to be run each time a new item is selected.

3

md-search-text-change

An expression to be run each time the search text updates.

4

md-search-text

A model to bind the search query text to.

5

md-selected-item

A model to bind the selected item to.

6

md-item-text

An expression that will convert your object to a single string.

7

placeholder

Placeholder text that will be forwarded to the input.

8

md-no-cache

Disables the internal caching that happens in autocomplete.

9

ng-disabled

Determines whether or not to disable the input field.

10

md-min-length

Specifies the minimum length of text before autocomplete will make suggestions.

11

md-delay

Specifies the amount of time (in milliseconds) to wait before looking for results.

12

md-autofocus

If true, will immediately focus the input element.

13

md-autoselect

If true, the first item will be selected by default.

14

md-menu-class

This will be applied to the dropdown menu for styling.

15

md-floating-label

This will add a floating label to autocomplete and wrap it in the md-input-container.

16

md-input-name

The name attribute given to the input element to be used with the FormController.

17

md-input-id

An ID to be added to the input element.

18

md-input-minlength

The minimum length for the input's value for validation.

19

md-input-maxlength

The maximum length for the input's value for validation.

20

md-select-on-match

When set as true, autocomplete will automatically select the exact item if the search text is an exact match.

Example:

  • The example shows the uses of md-autocomplete directive to showcase use of autocomplete.

am-autocomplete.html

<html lang="en" >
   <head>
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
	  <script language="javascript">
        angular
           .module('firstApplication', ['ngMaterial'])
           .controller('autoCompleteController', autoCompleteController);

        function autoCompleteController ($timeout, $q, $log) {
           var self = this;
           self.simulateQuery = false;
           self.isDisabled    = false;
           // list of states to be displayed
           self.states        = loadStates();
           self.querySearch   = querySearch;
           self.selectedItemChange = selectedItemChange;
           self.searchTextChange   = searchTextChange;
           self.newState = newState;
           function newState(state) {
              alert("This functionality is yet to be implemented!");
           }    
           function querySearch (query) {
              var results = query ? self.states.filter( createFilterFor(query) ) : self.states, deferred;
              if (self.simulateQuery) {
                 deferred = $q.defer();
                 $timeout(function () { 
                       deferred.resolve( results ); 
                    }, 
		            Math.random() * 1000, false);
                 return deferred.promise;
              } else {
                 return results;
              }
           }
           function searchTextChange(text) {
              $log.info('Text changed to ' + text);
           }
           function selectedItemChange(item) {
              $log.info('Item changed to ' + JSON.stringify(item));
           }
           //build list of states as map of key-value pairs
           function loadStates() {
              var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
                 Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
                 Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
                 Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
                 North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
                 South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
                 Wisconsin, Wyoming';
              return allStates.split(/, +/g).map( function (state) {
                 return {
                    value: state.toLowerCase(),
                    display: state
                 };
              });
           }
           //filter function for search query
           function createFilterFor(query) {
              var lowercaseQuery = angular.lowercase(query);
              return function filterFn(state) {
                 return (state.value.indexOf(lowercaseQuery) === 0);
              };
           }
        }  
	  </script>      
   </head>
   <body ng-app="firstApplication" ng-cloak>
      <div ng-controller="autoCompleteController as ctrl" layout="column" ng-cloak>
         <md-content class="md-padding">
            <form ng-submit="$event.preventDefault()">
               <p><code>md-autocomplete</code> can be used to provide search results from local or remote data sources.</p>
               <md-autocomplete
                  ng-disabled="ctrl.isDisabled"
                  md-no-cache="ctrl.noCache"
                  md-selected-item="ctrl.selectedItem"
                  md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
                  md-search-text="ctrl.searchText"
                  md-selected-item-change="ctrl.selectedItemChange(item)"
                  md-items="item in ctrl.querySearch(ctrl.searchText)"
                  md-item-text="item.display"
                  md-min-length="0"
                  placeholder="US State?">
                  <md-item-template>
                     <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
                  </md-item-template>
                  <md-not-found>
                     No states matching "{{ctrl.searchText}}" were found.
                     <a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a>
                  </md-not-found>
               </md-autocomplete>
               <br/>
               <md-checkbox ng-model="ctrl.simulateQuery">Show progress for results?</md-checkbox>
               <md-checkbox ng-model="ctrl.noCache">Disable caching?</md-checkbox>
               <md-checkbox ng-model="ctrl.isDisabled">Disable?</md-checkbox>
               <p><code>md-autocomplete</code> caches results when performing a query.  After first call, it uses the cached results to eliminate unnecessary server requests or lookup logic and it can be disabled.</p>
            </form>
         </md-content>
      </div>
   </body>
</html>

Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy angular material tutorial , angular 4 material , angular material2 , angular material example team

Output:


This tutorial provides most of the basics of all the below related informations such as angular material design , material design angular , angular material table , angularjs material , material angular , angular material icons , angular 2 material design , angular material template , angular materialize , angular material theme , angular material layout , material design angular 2 , angular material demo , angular material dialog , angular material form , angular material button , material angular 2 , angular material datepicker , angular material data table , angular material tutorial , angular material login form , material for angular 2 , angular material data grid , material ui angular , angular material calendar , angular material design table , angular material grid , google angular material , angular material components , angular 2 material ui , angular material autocomplete example , material ui angular 2 , angular material 2 demo , angular2 material demo , angular material template free , angular material design tutorial , angularjs material tutorial , material design for angular 2 , angular material tabs example , angular material ui , table angular material , angular material angular 2 , angular material layout align , what is angular material , angular material tabs , angular2 material example , angular 2 material tutorial , angular material login page , angular 2 material demo , angular material cdn , angular material design example , angularjs material design template , material angularjs , angular material grid list , angular material search bar , angular material vs bootstrap , angular material js , angular material range slider , angular material sidenav example , angular material form example , material angular icons , angular material datepicker example , angular material design icons , angular material design template , angular material bootstrap , materialize angular , angular material template free download , bootstrap material design angular , angular material table example

Related Searches to Angular AutoComplete