Angular Material Autocomplete

Angular Material Autocomplete – Angular Material provides a special input component <md-autocomplte> with a dropdown of all possible matches of custom query. This component provides user the real time suggestions when a user types in an input area. The search results can be provided local or remote sources. Here in this tutorial we are going to explain how you can use Angular Material autocomplete.

Angular Material Autocomplete Example

Let us create a very simple example using the component <md-autocomplte>

JavsScript Part

JavaScript Contains the following code –

Html Part

Html Part Contains the following code –

 
  
  <div ng-controller="myCtrl as ctrl" layout="column" ng-cloak="">
  <md-content class="md-padding">
    
  </md-content>
</div>
  

The advantage of autocomplete is that by default, md-autocomplete caches the results when performing a query(For remote data it loads data once and then caches). By this it eliminates the unneccessary requests. You can disabled this if you need.

If you run the above example it will produce output something like this –

Available Options

Following options are available-

• * md-items:
  An expression in the format of item in items to iterate over matches for your search.
• md-selected-item-change(expression):
  An expression to be run each time a new item is selected.
• md-search-text-change(expression):
  An expression to be run each time on search text update.
• md-search-text(expression)
  A model to bind the search query text to.
• md-selected-item(object):
  A model to bind the selected item to.
• md-item-text(expression
  An expression that will convert your object to a single string ie. placeholder string and this text will be forwarded to the input.
• md-no-cache(boolean):
  This is used to disable the internal caching.
• ng-disabled(boolean):
  This is used to enable/disable the input. Set true to disable and false to enable the input.
• md-require-match(boolean)
  When set to true, the autocomplete will add a validator, which will evaluate to false, when no item is currently selected.
• md-min-length(number):
  This is used to specify the minimum length of text before autocomplete will make suggestions
• md-delay(number)
  This is used to specify the amount of time (in milliseconds) to wait before looking for results
• md-autofocus(boolean):
  If true, the autocomplete will be automatically focused when a $mdDialog, $mdBottomsheet or $mdSidenav, which contains the autocomplete, is opening.
  Also the autocomplete will immediately focus the input element.
• md-no-asterisk(boolean)
  When present, asterisk will not be appended to the floating label.
• md-autoselect(boolean):
  If It is set to true, the first item will be automatically selected as default when dropdown menu is opened.
• md-menu-class(string)
  This is used to apply class to the dropdown menu for styling.
• md-floating-label string
  This will add a floating label to autocomplete and wrap it in md-input-container
• md-input-name(string)
  This is used to assign the name attribute to the input element to be used with FormController.
• md-select-on-focus(string):
  This is used to select the element of focus event.
• md-input-id(string):
  An ID to be added to the input element.
• md-input-minlength(number) :
  This is used to specify the minimum length of the input value.
• md-input-maxlength(number)
  This is used to specify the maximum length of the input value.
• md-select-on-match(boolean) :
  This will select automatically if the exact matching keyword is found.
• md-match-case-insensitive(boolean)
  When set and using md-select-on-match, autocomplete will select on case-insensitive match.
• md-escape-options(string)
  This is used to override escape key logic. Default is blur clear.