instantsearch.js
Advanced tools
instantsearch.js is a library of widgets to build high performance instant search experiences using 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 library of widgets designed for high performance instant search experiences using Algolia.
Have a look at the website: https://community.algolia.com/instantsearch.js/.
instantsearch.js is available on jsDelivr:
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/instantsearch.js/0/instantsearch.min.css" />
<script src="//cdn.jsdelivr.net/instantsearch.js/0/instantsearch.min.js"></script>
npm install instantsearch.js --save
var instantsearch = require('instantsearch.js');
// or use the 'instantsearch' global variable when using the jsDelivr build
var search = instantsearch({
appId: appId, // Mandatory
apiKey: apiKey, // Mandatory
indexName: indexName, // Mandatory
numberLocale: 'fr-FR' // Optional, defaults to 'en-EN',
urlSync: { // optionnal, activate url sync if defined
useHash: false
}
});
// add a searchBox widget
search.addWidget(
instantsearch.widgets.searchBox({
container: '#search-box',
placeholder: 'Search for libraries in France...'
})
);
// add a hits widget
search.addWidget(
instantsearch.widgets.hits({
container: '#hits-container',
hitsPerPage: 10
})
);
// start
search.start();
We natively support IE10+ and all other modern browsers without any dependency need on your side.
To get < IE10 support, please insert this code in the <head>:
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--[if lte IE 9]>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<![endif]-->
We use the polyfill.io.
The main configuration of instantsearch.js is done through a configuration object. The minimal configuration is made a of three attributes :
instantsearch({
appId: 'my_application_id',
apiKey: 'my_search_api_key',
indexName: 'my_index_name'
});
It can also contain other optionnal attributes to enable other features.
For the display of numbers, the locale will be determined by the browsers or forced in the configuration :
instantsearch({
appId: 'my_application_id',
apiKey: 'my_search_api_key',
indexName: 'my_index_name',
numberLocale: 'en-US'
});
At the start of instantsearch, the search configuration is based on the input of each widget and the URL. It is also possible to change the defaults of the configuration through an object that can contain any parameters understood by the Algolia API.
instantsearch({
appId: 'my_application_id',
apiKey: 'my_search_api_key',
indexName: 'my_index_name',
searchParameters: {
typoTolerance: 'strict'
}
});
Instantsearch let you synchronize the url with the current search parameters. In order to activate this feature, you need to add the urlSync object. It accepts 3 parameters :
All those parameters are optional and a minimal configuration looks like :
instantsearch({
appId: 'my_application_id',
apiKey: 'my_search_api_key',
indexName: 'my_index_name',
urlSync: {}
});
Only the local example:
npm run dev
# open http://localhost:8080
# make changes in your widgets, or in example/app.js
Local example and docs:
npm run dev:docs
# open http://localhost:4000/instantsearch.js/
npm test # jsdom + lint
npm run test:watch # jsdom
npm run test:watch:browser # chrome
npm run test:watch:browser -- --browsers ChromeCanary # force Chrome Canary
Most of the time npm run test:watch is sufficient.
instantsearch.js is MIT licensed.
We have a contributing guide, join us!
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 13 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
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.