Matériau angulaire - Saisie semi-automatique
le md-autocomplete, une directive angulaire, est utilisée comme contrôle d'entrée spécial avec une liste déroulante intégrée pour afficher toutes les correspondances possibles à une requête personnalisée. Ce contrôle agit comme une boîte à suggestions en temps réel dès que l'utilisateur tape dans la zone de saisie.<md-autocomplete>peut être utilisé pour fournir des résultats de recherche à partir de sources de données locales ou distantes. md-autocomplete met en cache les résultats lors de l'exécution d'une requête. Après le premier appel, il utilise les résultats mis en cache pour éliminer les demandes de serveur inutiles ou la logique de recherche et il peut être désactivé.
Les attributs
Le tableau suivant répertorie les paramètres et la description des différents attributs de md-autocomplete.
| Sr.Non | Paramètre et description |
|---|---|
| 1 | * md-items Expression au format d'élément dans les éléments pour parcourir les correspondances pour votre recherche. |
| 2 | md-selected-item-change Une expression à exécuter chaque fois qu'un nouvel élément est sélectionné. |
| 3 | md-search-text-change Une expression à exécuter à chaque mise à jour du texte de recherche. |
| 4 | md-search-text Un modèle auquel lier le texte de la requête de recherche. |
| 5 | md-selected-item Un modèle auquel lier l'élément sélectionné. |
| 6 | md-item-text Une expression qui convertira votre objet en une seule chaîne. |
| sept | placeholder Texte d'espace réservé qui sera transmis à l'entrée. |
| 8 | md-no-cache Désactive la mise en cache interne qui se produit lors de la saisie semi-automatique. |
| 9 | ng-disabled Détermine s'il faut désactiver ou non le champ de saisie. |
| dix | md-min-length Spécifie la longueur minimale du texte avant que la saisie semi-automatique ne fasse des suggestions. |
| 11 | md-delay Spécifie la durée (en millisecondes) à attendre avant de rechercher des résultats. |
| 12 | md-autofocus Si vrai, focalisera immédiatement l'élément d'entrée. |
| 13 | md-autoselect Si vrai, le premier élément sera sélectionné par défaut. |
| 14 | md-menu-class Cela sera appliqué au menu déroulant pour le style. |
| 15 | md-floating-label Cela ajoutera une étiquette flottante à la saisie semi-automatique et l'enveloppera dans le md-input-container. |
| 16 | md-input-name L'attribut name donné à l'élément d'entrée à utiliser avec le FormController. |
| 17 | md-input-id Un identifiant à ajouter à l'élément d'entrée. |
| 18 | md-input-minlength La longueur minimale de la valeur d'entrée pour la validation. |
| 19 | md-input-maxlength La longueur maximale de la valeur d'entrée pour la validation. |
| 20 | md-select-on-match Lorsqu'elle est définie sur true, la saisie semi-automatique sélectionne automatiquement l'élément exact si le texte de recherche correspond exactement. |
Exemple
L'exemple suivant montre l'utilisation du md-autocomplete directive et aussi l'utilisation de la saisie semi-automatique.
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>Résultat
Vérifiez le résultat.