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.