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.