instantsearch.js
Advanced tools
InstantSearch.js is a JavaScript library for building performant and instant search experiences with Algolia.
instantsearch.js is a library for building performant and instant search experiences with Algolia. It provides a set of widgets and tools to create highly customizable search interfaces.
Search Box
The search box widget allows users to input their search queries. It connects to the Algolia index and fetches results based on the user's input.
const search = instantsearch({
indexName: 'instant_search',
searchClient: algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey')
});
search.addWidget(
instantsearch.widgets.searchBox({
container: '#searchbox'
})
);
search.start();Hits
The hits widget displays the search results. It can be customized to show different attributes of the search results and highlight the matching parts of the query.
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates: {
item: '<div>{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}</div>'
}
})
);Refinement List
The refinement list widget allows users to filter search results based on specific attributes, such as categories. It provides checkboxes for each attribute value.
search.addWidget(
instantsearch.widgets.refinementList({
container: '#refinement-list',
attribute: 'categories'
})
);Pagination
The pagination widget enables users to navigate through pages of search results. It provides controls for moving to the next or previous page and jumping to specific pages.
search.addWidget(
instantsearch.widgets.pagination({
container: '#pagination'
})
);react-instantsearch is a library for building Algolia search interfaces in React. It provides React components that wrap instantsearch.js widgets, making it easier to integrate with React applications. Compared to instantsearch.js, it is more suitable for React-based projects.
searchkit is a suite of UI components built in React to create search experiences powered by Elasticsearch. It offers a similar set of features to instantsearch.js but is designed to work with Elasticsearch instead of Algolia.
InstantSearch.js is a JavaScript library for building performant and instant search experiences with Algolia.
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 | React InstantSearch Native | InstantSearch Android | InstantSearch iOS
You should be using InstantSearch if you want to:
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'),
});
search.addWidgets([
// 2. Create an interactive search box
instantsearch.widgets.searchBox({
container: '#searchbox',
placeholder: 'Search for products',
}),
// 3. Plug the search results into the product container
instantsearch.widgets.hits({
container: '#products',
templates: {
item: (hit, { html, components }) =>
html`
<h3>${components.Highlight({ attribute: 'name', hit })}</h3>
<p>${components.Snippet({ attribute: 'description', hit })}</p>
`,
},
}),
// 4. Make the brands refinable
instantsearch.widgets.refinementList({
container: '#brand',
attribute: 'brand',
}),
]);
// 5. Start the search!
search.start();
To learn more about the library, follow the getting started guide or check how to add it to your own project.
npm install instantsearch.js algoliasearch
# or
yarn add instantsearch.js algoliasearch
To use InstantSearch.js in a TypeScript environment, depending on your algoliasearch version, you need to import different types.
You still need to import these types even if you don't use InstantSearch.js with
algoliasearch.
algoliasearch v4.xThis version uses types provided by both algoliasearch and @algolia/client-search.
yarn add algoliasearch@4 @algolia/client-search
algoliasearch v3.xyarn add @types/algoliasearch@3
v3.x is deprecated and will soon no longer be supported.
The documentation is available on the Algolia website.
| E-commerce | Media | Travel |
|---|---|---|
 |  |  |
See more demos on the website.
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.
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.
Encountering an issue? Before reaching out to support, we recommend heading to our FAQ where you will find answers for the most common issues and gotchas with the library.
We welcome all contributors, from casual to regular 💙
To start contributing to code, you need to:
yarnyarn storybookPlease read our contribution process to learn more.
InstantSearch.js is MIT licensed.
FAQs
InstantSearch.js is a JavaScript library for building performant and instant search experiences with Algolia.
We found that instantsearch.js demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.