Repolode
Enviar
algolia

algolia/autocomplete

Biblioteca JavaScript para criar caixas de busca com autocomplete e typeahead, usando suas próprias fontes e renderização no DOM.

Ver no GitHubSite
Estrelas
5,265
Forks
339
Issues abertas
37
Último commit
há 15 dias

O que é?

Autocomplete é uma biblioteca JavaScript para criar experiências de busca com autocomplete. Você fornece um elemento contêiner e uma função getSources que retorna as sugestões a serem exibidas; a biblioteca cria o campo de entrada e cuida da interação pelo teclado e dos atributos de acessibilidade, enquanto você controla a marcação dos resultados.

As fontes podem ser qualquer coisa: uma lista estática de termos de busca, resultados de um índice Algolia, buscas recentes ou dados de qualquer outra API. O projeto é dividido em um pacote core para criar renderizadores personalizados e um pacote autocomplete-js pronto para uso, além de plugins para buscas recentes, sugestões de consulta, Algolia Insights, URLs de redirecionamento e tags.

A biblioteca funciona com qualquer solução de DOM virtual, incluindo JavaScript puro, Preact, React e Vue, e é distribuída pelo npm ou por uma tag de script de CDN.

Recursos principais

  • 01Só precisa de um contêiner e de uma função getSources para criar uma caixa de busca funcional.
  • 02Gera um campo de entrada acessível, com navegação pelo teclado e atributos ARIA.
  • 03Permite renderizar os resultados com sua própria marcação DOM.
  • 04Oferece plugins para buscas recentes, sugestões de consulta e Algolia Insights.
  • 05Funciona com JavaScript puro, Preact, React e Vue.

Casos de uso

  • Adicionar uma caixa de busca conforme o usuário digita a um site de documentação ou conteúdo.
  • Exibir buscas recentes e sugestões de consulta na barra de busca de um site.
  • Criar um combobox ou uma paleta de comandos personalizada, com renderização própria dos resultados.

Início rápido

  1. 1

    Instale o pacote autocomplete-js com npm

    npm install @algolia/autocomplete-js
  2. 2

    Adicione uma div de contêiner ao seu HTML

  3. 3

    Importe autocomplete e chame-o com o contêiner e a opção getSources

Antes de usar

  • Para exibir resultados além da configuração básica, você precisa criar suas próprias fontes e implementar a renderização.

Tópicos

#autocomplete#typeahead#search#javascript#combobox#accessibility#ui-component#accessible#alfred#algolia

Perguntas frequentes

O que é autocomplete?
Biblioteca JavaScript para criar caixas de busca com autocomplete e typeahead, usando suas próprias fontes e renderização no DOM. Autocomplete é uma biblioteca JavaScript para criar experiências de busca com autocomplete. Você fornece um elemento contêiner e uma função getSources que retorna as sugestões a serem exibidas; a biblioteca cria o campo de entrada e cuida da interação pelo teclado e dos atributos de acessibilidade, enquanto você controla a marcação dos resultados.
autocomplete é gratuito? Qual é a licença?
autocomplete é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
autocomplete ainda é mantido?
Manutenção ativa. O último commit de autocomplete foi em 7 de out. de 2026.
Para que posso usar autocomplete?
Adicionar uma caixa de busca conforme o usuário digita a um site de documentação ou conteúdo. Exibir buscas recentes e sugestões de consulta na barra de busca de um site. Criar um combobox ou uma paleta de comandos personalizada, com renderização própria dos resultados.
Como instalar autocomplete?
Instale o pacote autocomplete-js com npm: npm install @algolia/autocomplete-js Adicione uma div de contêiner ao seu HTML Importe autocomplete e chame-o com o contêiner e a opção getSources
Onde consigo autocomplete?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/algolia/autocomplete

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados