Materiał kątowy - autouzupełnianie
Plik md-autocomplete, dyrektywa kątowa, jest używana jako specjalna kontrolka wejściowa z wbudowanym menu rozwijanym pokazującym wszystkie możliwe dopasowania do niestandardowego zapytania. Ta kontrolka działa jak okno sugestii w czasie rzeczywistym, gdy tylko użytkownik wpisze w obszarze wprowadzania.<md-autocomplete>może służyć do dostarczania wyników wyszukiwania z lokalnych lub zdalnych źródeł danych. md-autocomplete buforuje wyniki podczas wykonywania zapytania. Po pierwszym wywołaniu wykorzystuje wyniki zapisane w pamięci podręcznej, aby wyeliminować niepotrzebne żądania serwera lub logikę wyszukiwania i można je wyłączyć.
Atrybuty
W poniższej tabeli wymieniono parametry i opis różnych atrybutów md-autocomplete.
| Sr.No | Parametr i opis |
|---|---|
| 1 | * md-items Wyrażenie w formacie elementu w elementach do iteracji po dopasowaniach do Twojego wyszukiwania. |
| 2 | md-selected-item-change Wyrażenie, które ma być uruchamiane za każdym razem, gdy wybierany jest nowy element. |
| 3 | md-search-text-change Wyrażenie, które ma być uruchamiane za każdym razem, gdy tekst wyszukiwania jest aktualizowany. |
| 4 | md-search-text Model, z którym ma zostać powiązany tekst zapytania wyszukiwania. |
| 5 | md-selected-item Model, do którego ma zostać powiązany wybrany element. |
| 6 | md-item-text Wyrażenie, które przekształci twój obiekt w pojedynczy ciąg. |
| 7 | placeholder Tekst zastępczy, który zostanie przekazany do wejścia. |
| 8 | md-no-cache Wyłącza wewnętrzne buforowanie, które ma miejsce podczas autouzupełniania. |
| 9 | ng-disabled Określa, czy wyłączyć pole wprowadzania, czy nie. |
| 10 | md-min-length Określa minimalną długość tekstu, zanim autouzupełnianie zacznie sugerować. |
| 11 | md-delay Określa czas (w milisekundach) oczekiwania przed wyszukaniem wyników. |
| 12 | md-autofocus Jeśli prawda, natychmiast skupi się na elemencie wejściowym. |
| 13 | md-autoselect Jeśli prawda, pierwsza pozycja zostanie wybrana domyślnie. |
| 14 | md-menu-class Zostanie to zastosowane do menu rozwijanego do stylizacji. |
| 15 | md-floating-label Spowoduje to dodanie pływającej etykiety do autouzupełniania i umieszczenie jej w md-input-container. |
| 16 | md-input-name Atrybut name nadany elementowi wejściowemu, który ma być używany z FormController. |
| 17 | md-input-id Identyfikator, który ma zostać dodany do elementu wejściowego. |
| 18 | md-input-minlength Minimalna długość wartości wejściowej do weryfikacji. |
| 19 | md-input-maxlength Maksymalna długość wartości wejściowej do walidacji. |
| 20 | md-select-on-match W przypadku ustawienia jako prawda autouzupełnianie automatycznie wybierze dokładny element, jeśli wyszukiwany tekst jest dokładnym dopasowaniem. |
Przykład
Poniższy przykład pokazuje użycie md-autocomplete dyrektywy, a także użycie autouzupełniania.
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>Wynik
Sprawdź wynik.