@techotto/auto-complete-component
v0.0.6
Published
Stencil Component Starter
Downloads
1
Readme
✨ Otto Autocomplete
Baseado em uma entrada de texto o componente sugere opções filtradas para seleção..
Como usar
instala o pacote
npm i @techotto/otto-auto-complete-component
Passo 1 - app.module.ts
Deve ser adicionado no arquivo app.module a inclusão de CUSTOM_ELEMENTS_SCHEMA
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
Adicione no final do @NgModule
@NgModule({
...
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
Passo 2 - main.ts
import { defineCustomElements as ottoAutoComplete } from '@techotto/otto-autocomplete/loader';
no final do arquivo main.ts você chama o que importou
ottoAutoComplete()
Componente html
<otto-autocomplete data='[{
"email":"[email protected]",
"name":"Hugo Ricchino"
},
{
"email":"[email protected]",
"name":"Thais"
},
{
"email":"[email protected]",
"name":"Mauricio"
}]' search-result='data.name' search-item='data.name' (returnAutoComplete)="returnAutoComplete($event)" placeholder='Pesquisar'>
</otto-autocomplete>
// variable = boolean;
Obs: Se estiver trabalhando com algum framework e seus parâmetros forem dinâmicos devem ser feitos em forma diferente dependendo do framwork assista o vídeo abaixo para entender melhor. Web Componentes atributos em framework
🧾 Parâmetros
| Parâmetro | Obrigatório | tipagem | Default | Observação |-------------------|-------------|----------|------|---| | data | Sim | string | null | Objeto que será filtrado. | searchItem | Sim | string | null | Qual propriedade o componente vai buscar - exemplo: searchItem='name' ou seja quando for digitado "Hugo" ele encontrará o resultado do objeto, se a busca fosse: "[email protected]" o retorno seria null pois o searchItem e name e não e-mail"Referente ao progresso. | searchResult | Sim | string | null | O valor que será mostrado no altocomplete exemplo: searchResult='name' resultado: Hugo Ricchino | (returnAutoComplete) | Sim | function | null | Nome da função a ser invocada.
Projeto fase beta, ajude contribuindo nesse projeto para melhorar! :ok_hand: