Biblioteca de componentes de interface do usuário Instantsearch Vanilla JS

O que é o Algolia?

A Algolia permite que desenvolvedores modernos criem experiências de pesquisa e descoberta de nível internacional sem a necessidade de DevOps.
Bibliotecas para todas as principais linguagens e frameworks facilitam o aprimoramento da experiência dos seus usuários.

Adicionar pesquisa instantânea a aplicativos em JavaScript

A biblioteca Vanilla JS InstantSearch UI oferece widgets de interface do usuário pré-construídos, personalizáveis e flexíveis para criar suas próprias experiências de pesquisa —explore a galeria de widgets. Ela possui recursos de renderização do lado do servidor e de roteamento, é de código aberto, pronta para produção e mantida pela Algolia.

Recursos

Oferece componentes de interface do usuário pré-criados, seguindo os princípios das melhores práticas para Vanilla JS, que permanecem independentes de frameworks externos
Integre ao seu aplicativo ou interface de usuário existente, ou use os modelos do InstantSearch
Vem com um tema CSS padrão, totalmente personalizável
Gerencia toda a lógica de negócios para solicitações de busca, respostas e estados
Personalização progressiva de componentes (usar, ampliar ou personalizar)

Versão

Compatível com todas as versões atuais da biblioteca JavaScript subjacente
O código é totalmente de código aberto e está disponível no GitHub
Inicie sua aplicação com o `create-instantsearch-app`, o NPM, ...

Integrações relacionadas

Funciona como preenchimento automático
E com todos os nossosclientes de APIeframeworks

links importantes

Comece agora

HTML (CRIE UMA CONTA GRATUITAAQUI)

          
            <div class="ais-InstantSearch">

  <h1>InstantSearch.js e-commerce demo</h1>

  <div class="left-panel">

    <div id="clear-refinements"></div>

    <h2>Brands</h2>

    <div id="brand-list"></div>

  </div>

  <div class="right-panel">

    <div id="searchbox"></div>

    <div id="hits"></div>

    <div id="pagination"></div>

  </div>

</div>

CSS

          
            body { font-family: sans-serif; padding: 1em; }

.ais-SearchBox { margin: 1em 0; }

.ais-Pagination { margin-top: 1em }

.left-panel { float: left; width: 250px; }

.right-panel { margin-left: 260px; }

PESQUISAR

          
            search.addWidgets([

  instantsearch.widgets.hits({

    container: '#hits',

    templates: {

      item: `

        <div>

          <img src="{{image}}" align="left" alt="{{name}}" />

          <div class="hit-name">

            {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}

          </div>

          <div class="hit-description">

            {{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}

          </div>

          <div class="hit-price">\${{price}}</div>

        </div>

      `,

    },

  })

]);

Algolia Assist

Em que posso ajudá-lo hoje?

Vanilla JS + Algolia