Material angular - Autocompletar

los md-autocomplete, una directiva angular, se utiliza como un control de entrada especial con un menú desplegable incorporado para mostrar todas las coincidencias posibles con una consulta personalizada. Este control actúa como un buzón de sugerencias en tiempo real tan pronto como el usuario escribe en el área de entrada.<md-autocomplete>se puede utilizar para proporcionar resultados de búsqueda de fuentes de datos locales o remotas. md-autocomplete almacena en caché los resultados al realizar una consulta. Después de la primera llamada, utiliza los resultados almacenados en caché para eliminar las solicitudes innecesarias del servidor o la lógica de búsqueda y se puede desactivar.

Atributos

La siguiente tabla enumera los parámetros y la descripción de los diferentes atributos de md-autocomplete.

No Señor Descripción de parámetros
1

* md-items

Una expresión en el formato de elemento en elementos para iterar sobre coincidencias para su búsqueda.

2

md-selected-item-change

Una expresión que se ejecutará cada vez que se seleccione un nuevo elemento.

3

md-search-text-change

Una expresión que se ejecutará cada vez que se actualice el texto de búsqueda.

4

md-search-text

Un modelo al que enlazar el texto de la consulta de búsqueda.

5

md-selected-item

Un modelo al que enlazar el elemento seleccionado.

6

md-item-text

Una expresión que convertirá tu objeto en una sola cadena.

7

placeholder

Texto de marcador de posición que se reenviará a la entrada.

8

md-no-cache

Deshabilita el almacenamiento en caché interno que ocurre en autocompletar.

9

ng-disabled

Determina si se deshabilita o no el campo de entrada.

10

md-min-length

Especifica la longitud mínima del texto antes de que el autocompletado haga sugerencias.

11

md-delay

Especifica la cantidad de tiempo (en milisegundos) que se debe esperar antes de buscar resultados.

12

md-autofocus

Si es verdadero, enfocará inmediatamente el elemento de entrada.

13

md-autoselect

Si es verdadero, el primer elemento se seleccionará de forma predeterminada.

14

md-menu-class

Esto se aplicará al menú desplegable de estilo.

15

md-floating-label

Esto agregará una etiqueta flotante para autocompletar y la envolverá en md-input-container.

dieciséis

md-input-name

El atributo de nombre que se le da al elemento de entrada que se utilizará con FormController.

17

md-input-id

Un ID que se agregará al elemento de entrada.

18

md-input-minlength

La longitud mínima del valor de la entrada para la validación.

19

md-input-maxlength

La longitud máxima del valor de la entrada para la validación.

20

md-select-on-match

Cuando se establece como verdadero, la función de autocompletar seleccionará automáticamente el elemento exacto si el texto de búsqueda coincide exactamente.

Ejemplo

El siguiente ejemplo muestra el uso del md-autocomplete directiva y también el uso de autocompletar.

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>

Resultado

Verifica el resultado.