# mreAutocomplete2 `` é um componente de input que exibe um drop-down dos resultados da pesquisa realizada. Esse componente possibilita a customização da listagem dos itens exibidos através do ``. E a customização do que será exibido quando nenhum item é encontrado através do ``. Permite também destacar e customizar através de CSS a parte do resultado que combina com a pesquisa. Feito pela utilização da diretiva `mre-ac-highlight` no elemento que contém o texto. ## Instalação - Adicionar o arquivo CSS no HTML ```html ``` - Adicionar o arquivo JS no HTML ```html ``` - Injetar o módulo na aplicação ```javascript angular.module('seu.module', [ 'mre.autocomplete2' ]); ``` No `` monta-se o template de exibição de cada item da listagem através de HTML. Sendo os valores dos itens acessados da mesma forma que o ng-repeat, utilizando a variavel `item` declarada em `items`. Por exemplo, caso na diretiva em `items` esteja `item in resultados` o objeto poderá ser acessado normalmente com `{{ item.dsItem }}`. No `` monta-se o template do que será exibido caso nenhum item corresponda a pesquisa, utilizando HTML. Quando se for listar itens retornados de um resource, a declaração dos objetos em `items` (no exemplo: item in `pesquisaResultados(modelTexto)`) deve retornar a promise desta, o que é feito acrescentado `.$promise` ao final da função da resource, conforme o exemplo abaixo. ### Javascript ```javascript function AppController($scope, ServicoResource) { $scope.pesquisaResultados = function(searchText) { return ServicoResource.get({param: vlParam}, function (response) { }, function (error) { Materialize.toast(error.message); }).$promise; }; $scope.mudancaTexto = function (modelTexto) { console.log(modelTexto); } } ``` ### HTML ```html

Nenhum Item Encontrado.

``` É utilizado `` para especificar o layout dos itens a serem exibidos e o `` para o layout de quando nenhum item for encontrado. Também utiliza-se da diretiva `` dentro de um elemento do `` para se destacar o termo pesquisado no texto dentro deste. # is-select Para layout padrão utiliza-se da clase `mre-autocomplete-select` no parâmetro `list-class` da diretiva, e o conteúdo a ser exibido dentro da tag `span` no `` e `` Em `items` deve-se passar um array de objetos para ser feita a busca nestes, no exemplo `arrayObjetos`. ### Javascript ```javascript function AppController($scope, ServicoResource) { $scope.arrayObjetos = [ { "id": 1, "descricao": 'Teste 1' }, { "id": 2, "descricao": 'Teste 2' }, { "id": 3, "descricao": 'Teste 3' }, { "id": 4, "descricao": 'Teste 4' }, { "id": 5, "descricao": 'Descricao 1' }, { "id": 6, "descricao": 'Descricao 2' }, ]; } ``` ### HTML ```html

Nenhum Item Encontrado.

Uma expressão no formato item in resultados. O resultados pode ser uma função que retorna os resultados de forma sincrona ou assincrona (por Promise)

| | text-change | expression= |

Um expressão que irá rodar cada vez que o texto de busca mudar.

| | search-text-model | expression= |

Uma model utilizada para armazenar o texto de busca.

| | selected-item | object= |

Uma model para armazenar o item selecionado.

| | item-text | expression= |

Uma expressão que vai converter seu objeto para uma string.

| | placeholder | string= |

Texto do Placeholder que será aplicado no input.

| | min-length | number= |

Determina o número minimo de caracteres do texto para o autocomplete fazer sugestões.

| | delay | number= |

Determina a quantidade de tempo (em milliseconds) para esperar antes de buscar resultados.

| | list-class | string= |

Aplica a classe CSS na caixa que engloba a listagem do autocomplete.

| | floating-label | string= |

Texto da label do autocomplete.

| | input-name | string= |

O atributo name do elemento input

| | input-id | string= |

O ID do elemento input

| | is-select | string= |

Quando presente altera o autocomplete para parecer um select

| | on-blur | string= |

Ao tirar o focu do campo executar uma ação

| # mreAcHighlight A diretiva `mre-ac-highlight` faz com que seja possível aplicar CSS ao texto pesquisado no autocomplete em um elemento. O texto será colocado dentro de um `` que pode ser estilizado. ## Usage ``` ### Exemplo

Nenhum Item Encontrado.

É utilizado o atributo `mre-ac-highlight` dentro do `mre-autocomplete-template` para se destacar o termo pesquisado no texto dentro daquela

. ```