Skip to content
⚡️ A JavaScript library for building performant and instant search experiences with Algolia.
Branch: develop
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github chore: update issue template link (#3386) Dec 28, 2018
.storybook
functional-tests
scripts chore(scripts): update package.json path Mar 14, 2019
src feat(queryRules): add connectQueryRules connector (#3597) Mar 22, 2019
stories feat(queryRules): add connectQueryRules connector (#3597) Mar 22, 2019
website chore(deps): update InstantSearch.css to 7.1.1 (#3545) Feb 20, 2019
.babelrc test: drop Rewire usage (#3445) Jan 25, 2019
.editorconfig
.eslintignore
.eslintrc.js
.gitignore chore(website): remove documentation from website (#3396) Jan 17, 2019
.nvmrc chore(deps): update node.js to v8.15.1 (#3573) Mar 2, 2019
.prettierrc
.sauce.yml
.travis.yml
.yarnrc
CHANGELOG.md
CONTRIBUTING.md chore(website): remove documentation from website (#3396) Jan 17, 2019
LICENSE docs(react-instantsearch): remove mentions of ris (#2094) Apr 4, 2017
README.md
global.d.ts chore(typescript): declare environment globals (#3577) Mar 4, 2019
netlify.toml
package.json
renovate.json
tsconfig.json chore(babel): migrate to Babel 7 (#3400) Jan 23, 2019
tslint.json test: add toWarnDev custom Jest matcher (#3574) Mar 4, 2019
yarn.lock chore(deps): update dependency rollup to v1.7.3 (#3627) Mar 25, 2019

README.md

InstantSearch.js

InstantSearch.js is a JavaScript library for building performant and instant search experiences with Algolia.


Build Status Version License

InstantSearch.js is a vanilla JavaScript library that lets you create an instant-search result experience using Algolia’s search API. It is part of the InstantSearch family:

InstantSearch.js | React InstantSearch | Vue InstantSearch | Angular InstantSearch | React InstantSearch Native | InstantSearch Android | InstantSearch iOS

Table of contents

Why

You should be using InstantSearch if you want to:

  • Design search experiences with best practices
  • Customize your components at will
  • Remain independent from external frameworks

Getting started

Using InstantSearch.js is as simple as adding this JavaScript code to your page:

// 1. Instantiate the search
const search = instantsearch({
  indexName: 'instant_search',
  searchClient: algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76'),
});

// 2. Create an interactive search box
search.addWidget(
  instantsearch.widgets.searchBox({
    container: '#searchbox',
    placeholder: 'Search for products',
  })
);

// 3. Plug the search results into the product container
search.addWidget(
  instantsearch.widgets.hits({
    container: '#products',
    templates: {
      item: '{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}',
    },
  })
);

// 4. Make the brands refinable
search.addWidget(
  instantsearch.widgets.refinementList({
    container: '#brand',
    attribute: 'brand',
  })
);

// 5. Start the search!
search.start();

Edit on CodeSandbox

To learn more about the library, follow the getting started guide or check how to add it to your own project.

Installation

npm install instantsearch.js algoliasearch
# or
yarn add instantsearch.js algoliasearch

Documentation

The documentation is available on the Algolia website.

Demos

E-commerce Media Travel
E-commerce demo preview Media demo preview Tourism demo preview

See more demos on the website.

Playground

You can get to know InstantSearch.js on this playground.

Start by adding widgets and tweaking the display. Once you feel familiar with the library, we recommend following the getting started guide.

Browser support

We support the last two versions of major browsers (Chrome, Edge, Firefox, Safari).

Please refer to the browser support section in the documentation to use InstantSearch.js on other browsers.

Contributing

We welcome all contributors, from casual to regular 💙

  • Bug report. Is something not working as expected? Send a bug report.
  • Feature request. Would you like to add something to the library? Send a feature request.
  • Documentation. Did you find a typo in the doc? Open an issue and we'll take care of it.
  • Development. If you don't know where to start, you can check the open issues that are tagged easy, the bugs or chores.

To start contributing to code, you need to:

  1. Fork the project
  2. Clone the repository
  3. Install the dependencies: yarn
  4. Run the development mode: yarn start
  5. Open the stories

Please read our contribution process to learn more.

License

InstantSearch.js is MIT licensed.

You can’t perform that action at this time.