Angular Material 自动完成
The
md-自动完成
，一个 Angular 指令，被用作一个特殊的输入控件，带有一个内置的下拉菜单来显示自定义查询的所有可能匹配项。只要用户在输入区域中键入，此控件就充当实时建议框。
属性
下表列出了不同属性的参数和说明 md-自动完成 .
| 序号 | 参数及说明 |
|---|---|
| 1 |
* md 项目 item in items 格式的表达式，用于遍历匹配项以进行搜索。 |
| 2 |
md-选定项更改 每次选择新项目时要运行的表达式。 |
| 3 |
md 搜索文本更改 每次搜索文本更新时运行的表达式。 |
| 4 |
md 搜索文本 将搜索查询文本绑定到的模型。 |
| 5 |
md-选定项 将所选项目绑定到的模型。 |
| 6 |
md 项目文本 将你的对象转换为单个字符串的表达式。 |
| 7 |
占位符 将转发到输入的占位符文本。 |
| 8 |
md-无缓存 禁用自动完成中发生的内部缓存。 |
| 9 |
ng-禁用 确定是否禁用输入字段。 |
| 10 |
md-最小长度 指定自动完成将提出建议之前的最小文本长度。 |
| 11 |
md-delay 指定在查找结果之前要等待的时间量(以毫秒为单位)。 |
| 12 |
md-自动对焦 如果为真，将立即聚焦输入元素。 |
| 13 |
md-自动选择 如果为 true，则默认选择第一项。 |
| 14 |
md 菜单类 这将应用于样式的下拉菜单。 |
| 15 |
md-浮动标签 这将为自动完成添加一个浮动标签并将其包装在 md-input-container 中。 |
| 16 |
md 输入名称 赋予与 FormController 一起使用的输入元素的名称属性。 |
| 17 |
md-输入-id 要添加到输入元素的 ID。 |
| 18 |
md-输入-最小长度 用于验证的输入值的最小长度。 |
| 19 |
md-输入-最大长度 用于验证的输入值的最大长度。 |
| 20 |
md-选择匹配 当设置为 true 时，如果搜索文本完全匹配，自动完成将自动选择确切的项目。 |
例子
下面的例子展示了使用 md-自动完成 指令以及自动完成的使用。
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 src = "https:// ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js">
<script src = "https:// ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js">
<script src = "https:// ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js">
<script src = "https:// ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js">
<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>
Result
验证结果。