Materiale angolare - Completamento automatico
Il md-autocomplete, una direttiva angolare, viene utilizzata come controllo di input speciale con un menu a discesa integrato per mostrare tutte le possibili corrispondenze a una query personalizzata. Questo controllo funge da casella di suggerimenti in tempo reale non appena l'utente digita nell'area di input.<md-autocomplete>può essere utilizzato per fornire risultati di ricerca da origini dati locali o remote. md-autocomplete memorizza nella cache i risultati durante l'esecuzione di una query. Dopo la prima chiamata, utilizza i risultati memorizzati nella cache per eliminare le richieste del server o la logica di ricerca non necessarie e può essere disabilitato.
Attributi
La tabella seguente elenca i parametri e la descrizione dei diversi attributi di md-autocomplete.
| Suor n | Parametro e descrizione |
|---|---|
| 1 | * md-items Un'espressione nel formato dell'elemento negli elementi per scorrere sulle corrispondenze per la ricerca. |
| 2 | md-selected-item-change Un'espressione da eseguire ogni volta che viene selezionato un nuovo elemento. |
| 3 | md-search-text-change Un'espressione da eseguire ogni volta che il testo di ricerca viene aggiornato. |
| 4 | md-search-text Un modello a cui associare il testo della query di ricerca. |
| 5 | md-selected-item Un modello a cui legare l'elemento selezionato. |
| 6 | md-item-text Un'espressione che convertirà il tuo oggetto in una singola stringa. |
| 7 | placeholder Testo segnaposto che verrà inoltrato all'input. |
| 8 | md-no-cache Disabilita la memorizzazione nella cache interna che avviene nel completamento automatico. |
| 9 | ng-disabled Determina se disabilitare o meno il campo di input. |
| 10 | md-min-length Specifica la lunghezza minima del testo prima che il completamento automatico fornisca suggerimenti. |
| 11 | md-delay Specifica la quantità di tempo (in millisecondi) da attendere prima di cercare i risultati. |
| 12 | md-autofocus Se true, focalizzerà immediatamente l'elemento di input. |
| 13 | md-autoselect Se vero, il primo elemento sarà selezionato per impostazione predefinita. |
| 14 | md-menu-class Questo verrà applicato al menu a discesa per lo styling. |
| 15 | md-floating-label Questo aggiungerà un'etichetta mobile per il completamento automatico e la avvolgerà nel contenitore md-input. |
| 16 | md-input-name L'attributo name assegnato all'elemento di input da utilizzare con FormController. |
| 17 | md-input-id Un ID da aggiungere all'elemento di input. |
| 18 | md-input-minlength La lunghezza minima per il valore dell'input per la convalida. |
| 19 | md-input-maxlength La lunghezza massima per il valore dell'input per la convalida. |
| 20 | md-select-on-match Se impostato su true, il completamento automatico selezionerà automaticamente l'elemento esatto se il testo di ricerca corrisponde esattamente. |
Esempio
L'esempio seguente mostra l'uso di md-autocomplete direttiva e anche l'uso del completamento automatico.
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>Risultato
Verifica il risultato.