Угловой материал - автозаполнение
В md-autocomplete, угловая директива, используется как специальный элемент управления вводом со встроенным раскрывающимся списком для отображения всех возможных совпадений с пользовательским запросом. Этот элемент управления действует как окно предложений в реальном времени, как только пользователь вводит текст в области ввода.<md-autocomplete>может использоваться для предоставления результатов поиска из локальных или удаленных источников данных. md-autocomplete кэширует результаты при выполнении запроса. После первого вызова он использует кешированные результаты, чтобы исключить ненужные запросы к серверу или логику поиска, и его можно отключить.
Атрибуты
В следующей таблице перечислены параметры и описание различных атрибутов md-autocomplete.
| Старший Нет | Параметр и описание |
|---|---|
| 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. |
| 17 | md-input-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>Результат
Проверьте результат.