Material Angular - Preenchimento Automático
o md-autocomplete, uma diretiva angular, é usado como um controle de entrada especial com uma lista suspensa embutida para mostrar todas as correspondências possíveis para uma consulta personalizada. Este controle atua como uma caixa de sugestões em tempo real assim que o usuário digita na área de entrada.<md-autocomplete>pode ser usado para fornecer resultados de pesquisa de fontes de dados locais ou remotas. O md-autocomplete armazena resultados em cache ao realizar uma consulta. Após a primeira chamada, ele usa os resultados armazenados em cache para eliminar solicitações desnecessárias do servidor ou lógica de pesquisa e pode ser desativado.
Atributos
A tabela a seguir lista os parâmetros e a descrição dos diferentes atributos de md-autocomplete.
| Sr. Não | Parâmetro e Descrição |
|---|---|
| 1 | * md-items Uma expressão no formato de item em itens para iterar nas correspondências de sua pesquisa. |
| 2 | md-selected-item-change Uma expressão a ser executada sempre que um novo item é selecionado. |
| 3 | md-search-text-change Uma expressão a ser executada sempre que o texto da pesquisa for atualizado. |
| 4 | md-search-text Um modelo ao qual vincular o texto da consulta de pesquisa. |
| 5 | md-selected-item Um modelo para vincular o item selecionado. |
| 6 | md-item-text Uma expressão que converterá seu objeto em uma única string. |
| 7 | placeholder Texto de espaço reservado que será encaminhado para a entrada. |
| 8 | md-no-cache Desativa o cache interno que ocorre no preenchimento automático. |
| 9 | ng-disabled Determina se deve ou não desativar o campo de entrada. |
| 10 | md-min-length Especifica o comprimento mínimo do texto antes que o preenchimento automático faça sugestões. |
| 11 | md-delay Especifica a quantidade de tempo (em milissegundos) de espera antes de procurar os resultados. |
| 12 | md-autofocus Se verdadeiro, focalizará imediatamente o elemento de entrada. |
| 13 | md-autoselect Se verdadeiro, o primeiro item será selecionado por padrão. |
| 14 | md-menu-class Isso será aplicado ao menu suspenso de estilo. |
| 15 | md-floating-label Isso adicionará um rótulo flutuante para autocompletar e envolvê-lo no contêiner md-input. |
| 16 | md-input-name O atributo name dado ao elemento de entrada a ser usado com o FormController. |
| 17 | md-input-id Um ID a ser adicionado ao elemento de entrada. |
| 18 | md-input-minlength O comprimento mínimo do valor de entrada para validação. |
| 19 | md-input-maxlength O comprimento máximo do valor de entrada para validação. |
| 20 | md-select-on-match Quando definido como verdadeiro, o preenchimento automático selecionará automaticamente o item exato se o texto da pesquisa for uma correspondência exata. |
Exemplo
O exemplo a seguir mostra o uso do md-autocomplete diretiva e também o uso de autocomplete.
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
Verifique o resultado.