English 中文(简体)
Angular Material Tutorial

Selected Reading

Angular Material - Autocomplete
  • 时间：2025-02-05

Angular Material - Autocomplete

Previous Page Next Page  

The md-autocomplete, an Angular Directive, is used as a special input control with an inbuilt dropdown 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. <md-autocomplete> can be used to provide search results from local or remote data sources. md-autocomplete caches results when performing a query. After first call, it uses the cached results to epminate unnecessary server requests or lookup logic and it can be disabled.

Attributes

The following table psts out the parameters and description of the different attributes of md-autocomplete.

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 milpseconds) 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 appped to the dropdown menu for stypng.
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 vapdation.
19

md-input-maxlength

The maximum length for the input s value for vapdation.
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 following example shows the use of the md-autocomplete directive and also the use of autocomplete.

am_autocomplete.htm

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

         function autoCompleteController ($timeout, $q, $log) {
            var self = this;
            self.simulateQuery = false;
            self.isDisabled    = false;
            
            // pst 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 functionapty 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 pst of states as map of key-value pairs
            function loadStates() {
               var allStates =  Alabama, Alaska, Arizona, Arkansas, Capfornia, Colorado, Connecticut, Delaware,
                  Florida, Georgia, Hawaii, Idaho, Ilpnois, Indiana, Iowa, Kansas, Kentucky, Louisiana,
                  Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,
                  Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Caropna,
                  North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Caropna,
                  South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,
                  Wisconsin, Wyoming ;
                  
               return allStates.sppt(/, +/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 = "firstApppcation" ng-cloak>
      <span 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-highpght-text = "ctrl.searchText"
                        md-highpght-flags = "^i">{{item.display}}</span>
                  </md-item-template>
                  
                  <md-not-found>
                     No states matching "{{ctrl.searchText}}" were found.
                     <a ng-cpck = "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 epminate unnecessary
               server requests or lookup logic and it can be disabled.</p>
            </form>
         </md-content>
      </span>
   </body>
</html>

Result

Verify the result.