Vanilla JS InstantSearch for web

Vanilla JS InstantSearch for web

A front-end search library with Search UI components

Sign up

Features

  • Provides pre-built UI components following best practice principles for Vanilla JS that remain independent from external frameworks
  • Integrate into your existing UI or app, or use InstantSearch templates
  • Comes with a default CSS theme, completely customizable
  • Manages all business logic for search requests, responses, and states
  • Progressive customization of components (use, extend, or customize)

Version

  • Compatible with all current versions of the underlying JavaScript library
  • Code is entirely open source and available on GitHub
  • Bootstrap your application, with create-instantsearch-app, NPM, ...

Related Integrations

  • Works with Autocomplete and all our API clients and frameworks

Key links


Get started

HTML

1<div class="ais-InstantSearch">
2  <h1>InstantSearch.js e-commerce demo</h1>
3
4  <div class="left-panel">
5    <div id="clear-refinements"></div>
6
7    <h2>Brands</h2>
8    <div id="brand-list"></div>
9  </div>
10
11  <div class="right-panel">
12    <div id="searchbox"></div>
13    <div id="hits"></div>
14    <div id="pagination"></div>
15  </div>
16</div>

CSS

1body { font-family: sans-serif; padding: 1em; }
2.ais-SearchBox { margin: 1em 0; }
3.ais-Pagination { margin-top: 1em }
4.left-panel { float: left; width: 250px; }
5.right-panel { margin-left: 260px; }

SEARCH

1search.addWidgets([
2  instantsearch.widgets.hits({
3    container: '#hits',
4    templates: {
5      item: `
6        <div>
7          <img src="{{image}}" align="left" alt="{{name}}" />
8          <div class="hit-name">
9            {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
10          </div>
11          <div class="hit-description">
12            {{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}
13          </div>
14          <div class="hit-price">\${{price}}</div>
15        </div>
16      `,
17    },
18  })
19]);

Built with Vanilla JS on Algolia