You are here
自动完成（Autocomplete） 文江博客 开发文档 Angular Material 教程 文章详情 有大用
星期一, 2022-11-07 12:58 — adminshiping1
md-autocomplete是一个Angular Directive，用作一个特殊的输入控件，带有内置下拉列表，显示与自定义查询的所有可能匹配。 一旦用户键入输入区域，该控件就充当实时建议框。 《md-autocomplete》可用于从本地或远程数据源提供搜索结果。 执行查询时md-autocomplete缓存结果。 第一次调用后，它使用缓存的结果来消除不必要的服务器请求或查找逻辑，并且可以禁用它。
属性 (Attributes)
下表列出了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 | 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一起使用的input元素的name属性。 |
| 17 | md-input-id 要添加到input元素的ID。 |
| 18 | md-input-minlength 验证输入值的最小长度。 |
| 19 | md-input-maxlength 验证输入值的最大长度。 |
| 20 | md-select-on-match 设置为true时，如果搜索文本完全匹配，自动填充将自动选择确切的项目。 |
例子 (Example)
以下示例显示了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>
普通分类: