Angular Material - 自动完成
md-autocomplete 是一个 Angular 指令，用作带有内置下拉列表的特殊输入控件，用于显示自定义查询的所有可能匹配项。 一旦用户在输入区域中键入内容，该控件就会充当实时建议框。
属性
下表列出了md-autocomplete不同属性的参数和说明。
| Sr.No | 参数和描述 |
|---|---|
| 1 | * md-items 采用 item in items 格式的表达式，用于迭代搜索的匹配项。 |
| 2 | md-selected-item-change 每次选择新项目时运行的表达式。 |
| 3 | md-search-text-change 每次搜索文本更新时运行的表达式。 |
| 4 | md-search-text 将搜索查询文本绑定到的模型。 |
| 5 | md-selected-item 将所选项目绑定到的模型。 |
| 6 | md-item-text 将对象转换为单个字符串的表达式。 |
| 7 | placeholder 将转发到输入的占位符文本。 |
| 8 | md-no-cache 禁用自动完成过程中发生的内部缓存。 |
| 9 | ng-disabled 确定是否禁用输入字段。 |
| 10 | md-min-length 指定自动完成功能提出建议之前的最小文本长度。 |
| 11 | md-delay 指定查找结果之前等待的时间（以毫秒为单位）。 |
| 12 | md-autofocus 如果为 true，将立即聚焦输入元素。 |
| 13 | md-autoselect 如果为 true，则默认选择第一项。 |
| 14 | md-menu-class 这将应用于下拉菜单的样式。 |
| 15 | md-floating-label 这将添加一个浮动标签以自动完成并将其包装在 md-input-container 中。 |
| 16 | md-input-name 为与 FormController 一起使用的输入元素指定的名称属性。 |
| 17 | md-input-id 要添加到输入元素的 ID。 |
| 18 | md-input-minlength 用于验证的输入值的最小长度。 |
| 19 | md-input-maxlength 用于验证的输入值的最大长度。 |
| 20 | md-select-on-match 设置为 true 时，如果搜索文本完全匹配，自动完成功能将自动选择准确的项目。 |
示例
以下示例展示了 md-autocomplete 指令的使用以及自动完成的使用。
am_autocomplete.html
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://www.w3ccoo.com/lib/angular_material/1.0.0/angular-material.min.css">
<script src = "https://cdn.staticfile.org/angular.js/1.4.8/angular.min.js"></script>
<script src = "https://cdn.staticfile.org/angular.js/1.4.8/angular-animate.min.js"></script>
<script src = "https://cdn.staticfile.org/angular.js/1.4.8/angular-aria.min.js"></script>
<script src = "https://cdn.staticfile.org/angular.js/1.4.8/angular-messages.min.js"></script>
<script src = "https://www.w3ccoo.com/lib/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;
// 要显示的状态列表
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));
}
// 将状态列表构建为键值对映射
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
};
});
}
//搜索查询的过滤功能
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>
结果
验证结果。
