Vật liệu góc cạnh - Tự động hoàn thành
Các md-autocomplete, một Chỉ thị Angular, được sử dụng như một điều khiển đầu vào đặc biệt với một danh sách thả xuống có sẵn để hiển thị tất cả các kết quả phù hợp có thể có với một truy vấn tùy chỉnh. Điều khiển này hoạt động như một hộp gợi ý thời gian thực ngay khi người dùng nhập vào vùng nhập.<md-autocomplete>có thể được sử dụng để cung cấp kết quả tìm kiếm từ các nguồn dữ liệu cục bộ hoặc từ xa. md-autocomplete kết quả lưu vào bộ đệm khi thực hiện một truy vấn. Sau lần gọi đầu tiên, nó sử dụng kết quả được lưu trong bộ nhớ cache để loại bỏ các yêu cầu máy chủ hoặc logic tra cứu không cần thiết và nó có thể bị vô hiệu hóa.
Thuộc tính
Bảng sau liệt kê các tham số và mô tả về các thuộc tính khác nhau của md-autocomplete.
| Sr.No | Mô tả về Thông Số |
|---|---|
| 1 | * md-items Một biểu thức ở định dạng mục trong các mục để lặp qua các kết quả phù hợp cho tìm kiếm của bạn. |
| 2 | md-selected-item-change Một biểu thức sẽ được chạy mỗi khi một mục mới được chọn. |
| 3 | md-search-text-change Một biểu thức sẽ được chạy mỗi khi văn bản tìm kiếm cập nhật. |
| 4 | md-search-text Một mô hình để liên kết văn bản truy vấn tìm kiếm. |
| 5 | md-selected-item Một mô hình để liên kết mục đã chọn. |
| 6 | md-item-text Một biểu thức sẽ chuyển đổi đối tượng của bạn thành một chuỗi đơn. |
| 7 | placeholder Văn bản giữ chỗ sẽ được chuyển tiếp tới đầu vào. |
| số 8 | md-no-cache Tắt bộ nhớ đệm nội bộ xảy ra trong tự động hoàn thành. |
| 9 | ng-disabled Xác định xem có tắt trường nhập hay không. |
| 10 | md-min-length Chỉ định độ dài tối thiểu của văn bản trước khi tính năng tự động hoàn thành sẽ đưa ra đề xuất. |
| 11 | md-delay Chỉ định khoảng thời gian (tính bằng mili giây) để đợi trước khi tìm kiếm kết quả. |
| 12 | md-autofocus Nếu đúng, sẽ ngay lập tức tập trung phần tử đầu vào. |
| 13 | md-autoselect Nếu đúng, mục đầu tiên sẽ được chọn theo mặc định. |
| 14 | md-menu-class Điều này sẽ được áp dụng cho menu thả xuống để tạo kiểu. |
| 15 | md-floating-label Thao tác này sẽ thêm một nhãn nổi để tự động hoàn thành và bọc nó trong md-input-container. |
| 16 | md-input-name Thuộc tính name được cấp cho phần tử đầu vào được sử dụng với FormController. |
| 17 | md-input-id ID sẽ được thêm vào phần tử đầu vào. |
| 18 | md-input-minlength Độ dài tối thiểu cho giá trị của đầu vào để xác thực. |
| 19 | md-input-maxlength Độ dài tối đa cho giá trị của đầu vào để xác thực. |
| 20 | md-select-on-match Khi được đặt là true, tính năng tự động điền sẽ tự động chọn mục chính xác nếu văn bản tìm kiếm khớp chính xác. |
Thí dụ
Ví dụ sau đây cho thấy việc sử dụng md-autocomplete chỉ thị và cả việc sử dụng tính năng tự động hoàn thành.
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>Kết quả
Xác minh kết quả.