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 first call, it uses the cached results to eliminate
unnecessary server requests or lookup logic and it can be disabled.Attributes
S.N. | 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 md-input-container. |
16 | md-input-name The name attribute given to the input element to be used with 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 exact the item if the search text is an exact match. |
Example
The following example showcases the use ofmd-autocomplete
directive to showcase use of autocomplete.am_autocomplete.htm
<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>
python training in bangalore | python online training
ReplyDeleteaws training in Bangalore | aws online training
artificial intelligence training in bangalore | artificial intelligence online training
machine learning training in bangalore | machine learning online training
data science training in bangalore | data science online training in