autocomplete

Uma biblioteca JavaScript que permite criar rapidamente experiências de preenchimento automático

Tudo que você precisa para começar é:

• Um contêiner para injetar a experiência
• Dados para preencher o preenchimento automático
• Qualquer solução Virtual DOM (JavaScript, Preact, React, Vue, etc.)

Os dados que preenchem os resultados do preenchimento automático são chamados de fontes. Você pode usar o que quiser em suas fontes: um conjunto estático de termos de pesquisa, resultados de pesquisa de uma fonte externa como um índice Algolia, pesquisas recentes e muito mais.

Ao configurar apenas esses dois parâmetros necessários ( container e getSources ), você pode ter uma experiência interativa de preenchimento automático. A biblioteca cria uma entrada e fornece atributos de interatividade e acessibilidade, mas você tem controle total dos elementos DOM para produzir .

Documentação • API • Playground

Instalação

A maneira recomendada de começar é com o pacote autocomplete-js . Inclui tudo que você precisa para renderizar uma experiência de preenchimento automático de JavaScript.

Caso contrário, você pode instalar o pacote autocomplete-core se quiser construir um renderizador do zero.

Todos os pacotes de preenchimento automático estão disponíveis no registro npm.

yarn add @algolia/autocomplete-js
# or
npm install @algolia/autocomplete-js

Se você não usa um gerenciador de pacotes, pode usar o elemento script HTML:

 < script src =" https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js " > </ script >
< script >
  const { autocomplete } = window [ '@algolia/autocomplete-js' ] ;
</ script > 

Uso

Para começar, você precisa de um contêiner para o preenchimento automático. Se ainda não tiver um, você pode inserir um em sua marcação:

 < div id = "autocomplete" > < / div >

Em seguida, insira seu preenchimento automático nele chamando a função autocomplete e fornecendo o container . Pode ser um seletor CSS ou um Elemento.

Certifique-se de fornecer um contêiner (por exemplo, um div ), não um input . O preenchimento automático gera uma caixa de pesquisa totalmente acessível para você.

 import { autocomplete } from '@algolia/autocomplete-js' ;

autocomplete ( {
  container : '#autocomplete' ,
  // ...
} ) ;

Continue lendo nosso guia de primeiros passos .

Documentação

A documentação oferece algumas maneiras de aprender sobre a biblioteca Autocomplete:

• Leia os Conceitos Básicos para saber mais sobre os princípios subjacentes, como Fontes e Estado .
• Siga os guias para entender como construir padrões de UX comuns.
• Consulte a referência da API para obter uma lista abrangente de parâmetros e opções.
• Experimente o Playground , onde você pode criar uma implementação básica e brincar.

Você pode encontrar mais na documentação.

Apoiar

• Discussões do GitHub

Pacotes

Pacote	Descrição	Documentação
autocomplete-js	Pacote JavaScript para preenchimento automático	Documentação
autocomplete-core	Primitivos principais do JavaScript para construir uma experiência de preenchimento automático	Documentação
autocomplete-plugin-recent-searches	Um plugin para adicionar pesquisas recentes ao preenchimento automático	Documentação
autocomplete-plugin-query-suggestions	Um plugin para adicionar sugestões de consulta ao preenchimento automático	Documentação
autocomplete-plugin-algolia-insights	Um plugin para adicionar Algolia Insights ao Autocomplete	Documentação
autocomplete-plugin-redirect-url	Um plugin para habilitar URLs de redirecionamento	Documentação
autocomplete-plugin-tags	Um plugin para gerenciar e exibir uma lista de tags no Autocomplete	Documentação
autocomplete-preset-algolia	Predefinições para usar recursos Algolia com Autocomplete	Documentação
autocomplete-theme-classic	Tema clássico para preenchimento automático	Documentação

Vitrine

Veja as experiências incríveis que as pessoas criaram com o Autocomplete:

DocSearch	Documentação Algolia

Saiba mais em nossa Vitrine .

Caixas de areia

Confira sandboxes usando Autocomplete.

Licença

MIT