Autocomplete
Se não tiver necessidade de exibir uma lista grande de opções, utilize o Select.
O Autocomplete é um input que sugere uma lista de opções baseadas no termo digitado. Essas opções devem ser atualizadas a cada tecla digitada. Utilize quando for necessário encontrar uma opção dentro de um volume muito grande de informações.
Tipos de opções
No momento, não é possível personalizar os estilos das opções de um Autocomplete.
Texto auxiliar
Você pode aplicar um texto principal para descrever a opção e, se necessário, um texto de apoio pode complementar o principal.
Com ícone
Os ícones adicionam complexidade e podem impactar na leitura das opções, por isso, use somente em casos realmente necessários.
Ícones são elementos decorativos opcionais que reforçam o significado de uma opção e aparecem sempre à esquerda do texto principal.
Com o componente Tag
Utilize o componente Tag quando precisar destacar alguma opção.
Separadores
Divisor com linha
Use o divisor com estilo de linha quando precisar criar uma separação visual entre as opções.
Agrupador com texto
Quando a intenção for criar um agrupamento de opções, utilize o agrupador com texto, nele você pode adicionar um nome para o grupo de opções.
Limpar campo
Padrão
Para limpar o campo, é só clicar no "x" localizado à direita do campo do Autocomplete. O "x" aparece após algum valor ser digitado.
Múltipla selecção
Para remover todas as opções selecionadas de uma única vez, é só clicar no "x" localizado à direita do campo do Autocomplete. Também é possível remover individualmente cada opção selecionada, clicando no "x" de cada opção.
Quando a quantidade de opções selecionadas for maior que o tamanho do campo, as tags são reorganizadas. O Autocomplete de múltipla seleção é o único componente de entrada de dados que permite a alteração da altura.
Sem resultados
Quando nenhuma opção for encontrada, por padrão nenhuma mensagem deve ser exibida. Uma mensagem pode ser adicionada e personalizada se tiver necessidade.
Você pode adicionar uma nova opção à lista alterando o estado de opções que está sendo renderizado. Para mais detalhes acesse nossa aba de exemplos.
Carregamento
Quando o Autocomplete tiver carregamento assíncrono, é possível adicionar a propriedade loading para que o Spinner apareça dentro do campo.
Feedback
Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.