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.
- <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.
angular material tutorials - Interactive Output - auto completeExample
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