@wizsolucoes/wiz-auto-complete-component NPM

Wiz solucoes

✨ Wiz Autocomplete

Baseado em uma entrada de texto o componente sugere opções filtradas para seleção.. Seguindo o design system Sys da Wiz.

Como usar

instala o pacote

npm i @wizsolucoes/wiz-auto-complete-component

Frameworks	Link
Angular	Link
React	Link
Vue	Link

outros

Componente html

  <wiz-autocomplete data='[{
          "email":"hugo@teste.com.br",
          "name":"Hugo Ricchino"
        },
        {
          "email":"thais@teste.com.br",
          "name":"Thais"
        },
        {
          "email":"mauricio@teste.com.br",
          "name":"Mauricio"
        }]' search-result='name' search-item='name' (returnAutoComplete)="returnAutoComplete($event)" placeholder='Pesquisar'>
  </wiz-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: "josedopicles@wizsolucoes.com.br" 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.