md-autocomplete ，Angular Directive，用作特殊输入控件，内置下拉列表以显示与自定义查询的所有可能匹配项.一旦用户键入输入区域，该控件就充当实时建议框. < md-autocomplete> 可用于提供本地或远程数据源的搜索结果.执行查询时md-autocomplete缓存结果.第一次调用后，它使用缓存的结果来消除不必要的服务器请求或查找逻辑，并且可以禁用它.
下表列出输出 md-autocomplete 的不同属性的参数和描述.
| Sr.No | 参数&说明 |
|---|---|
| 1 | * md-items 项目中项目格式的表达式，用于迭代匹配搜索. |
| 2 | md-selected-item-change 每次选择新项目时都要运行的表达式. |
| 3 | md-search-text-change 每次搜索文本更新时运行的表达式. |
| 4 | md-search-text 将搜索查询文本绑定到的模型. |
| 5 | md-selected -item 将所选项目绑定到的模型. |
| 6 | md-item-text 将您的对象转换为单个字符串的表达式. |
| 7 | 占位符 将转发给输入的占位符文本. |
| 8 | md-no-cache 禁用自动完成中发生的内部缓存. |
| 9 | ng-disabled 确定是否禁用输入字段. |
| 10 | md-min-length 指定自动完成之前文本的最小长度将提出建议. |
| 11 | md-delay 指定在查找结果之前要等待的时间(以毫秒为单位) . |
| 12 | md-autofocus 如果为true，将立即聚焦输入元素. |
| 13 | md-autoselect 如果为真，默认选择第一项. |
| 14 | md-menu-class 这将应用于样式的下拉菜单. |
| 15 | md-floating -label 这将添加浮动标签以自动完成并将其包装在md-input-container中. |
| 16 | md-input-name 给予与FormController一起使用的input元素的name属性. |
| 17 | md-input-id 一个ID到被添加到输入元素. |
| 18 | md-input-minlength 输入验证值的最小长度. |
| 19 | md-input-maxlength 输入值验证的最大长度. |
| 20 | md-select-on-match 设置为true时，如果搜索，自动填充将自动选择确切的项目文本完全匹配. |
以下示例显示了 md-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>Verify the result.
