探客时代
InstantSearch.js
A JavaScript library for building performant and instant search experiences...
README
InstantSearch.js is a JavaScript library for building performant and instant search experiences with Algolia.
[![Version][version-svg]][package-url] [![License][license-image]][license-url] [![Build Status][ci-svg]][ci-url] [![Pull reminders][pull-reminders-svg]][pull-reminders-url]
InstantSearch.js is a vanilla JavaScript library that lets you create an instant-search result experience using [Algolia][algolia-website]’s search API. It is part of the InstantSearch family:
InstantSearch.js | [React InstantSearch][react-instantsearch-github] | [Vue InstantSearch][vue-instantsearch-github] | [Angular InstantSearch][instantsearch-angular-github] | [React InstantSearch Native][react-instantsearch-github] | [InstantSearch Android][instantsearch-android-github] | [InstantSearch iOS][instantsearch-ios-github]
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:
- ``` js
- // 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: '{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}',
- },
- }),
- // 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.
Installation
- ```sh
- npm install instantsearch.js algoliasearch
- # or
- yarn add instantsearch.js algoliasearch
- ```
TypeScript users
To use InstantSearch.js in a TypeScript environment, depending on your [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript) version, you need to import different types.
>You still need to import these types even if you don't use InstantSearch.js with [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript).
algoliasearch v4.x
This version uses types provided by both algoliasearch and @algolia/client-search.
- ``` sh
- yarn add algoliasearch@4 @algolia/client-search
- ```
algoliasearch v3.x
- ``` sh
- yarn add @types/algoliasearch@3
- ```
>v3.x is deprecated and will soon no longer be supported.
Documentation
The documentation is available on the Algolia website.
Demos
| E-commerce | Media | Travel |
|---|---|---|
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
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.
Troubleshooting
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.
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. Install the dependencies: yarn
1. Run the development mode: cd packages/instantsearch.js && yarn storybook
Please read our contribution process to learn more.
License
InstantSearch.js is [MIT licensed][license-url].
[version-svg]: https://img.shields.io/npm/v/instantsearch.js.svg?style=flat-square
[package-url]: https://npmjs.org/package/instantsearch.js
[ci-svg]: https://img.shields.io/circleci/project/github/algolia/instantsearch.js.svg?style=flat-square
[ci-url]: https://circleci.com/gh/algolia/instantsearch.js
[pull-reminders-svg]: https://img.shields.io/badge/pull%20reminders-✓-success.svg?style=flat-square
[pull-reminders-url]: https://pullreminders.com?ref=badge
[license-image]: http://img.shields.io/badge/license-MIT-green.svg?style=flat-square
[license-url]: LICENSE
[algolia-website]: https://www.algolia.com/?utm_source=instantsearch.js&utm_campaign=repository
[react-instantsearch-github]: https://github.com/algolia/react-instantsearch/
[vue-instantsearch-github]: https://github.com/algolia/vue-instantsearch
[instantsearch-android-github]: https://github.com/algolia/instantsearch-android
[instantsearch-ios-github]: https://github.com/algolia/instantsearch-ios
[instantsearch-angular-github]: https://github.com/algolia/angular-instantsearch
