Skip to content

rlugojr/instantsearch.js

 
 

Repository files navigation

instantsearch.js logo

Version Build Status License Downloads

instantsearch.js is a library of UI widgets to help you build the best instant-search experience with Algolia's Hosted Search API.

Have a look at the website: https://community.algolia.com/instantsearch.js/.

Demo

Here is an example of what you could easily build with instantsearch.js and Algolia:

instantsearch.js animated demo

You can find the complete tutorial on how it was done on our website.

Table of contents

Setup

With the jsDelivr CDN

instantsearch.js is available on jsDelivr:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.css" />
<script src="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script>

Other CDNS

We recommend using jsDelivr, but algoliasearch is also available at:

Using jsDelivr you will get auto updates for all the 1.x.x versions without any breaking change.

With npm, browserify, webpack

npm install instantsearch.js --save

Quick Start

See our documentation website for complete docs.

let instantsearch = require('instantsearch.js');
// or use the 'instantsearch' global (window) variable when using the jsDelivr build

let search = instantsearch({
  appId: appId,
  apiKey: apiKey,
  indexName: indexName
});

// 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();

Browser support

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.

Development workflow

Requirements:

Run the local example:

npm run dev
# open http://localhost:8080
# make changes in your widgets, or in example/app.js

Run local example and docs:

npm run dev:docs
# open http://localhost:4000/

Run tests and lint:

npm test

Test

npm test # unit tests, jsdom + lint
npm run test:watch # unit tests, jsdom, watch

Most of the time npm run test:watch is sufficient.

Functional tests

You need docker.

Run it like so:

docker pull elgalu/selenium
docker run --name=grid --net=host --pid=host --privileged=true \
    -e VNC_PASSWORD=realtime \
    -e NOVNC=true \
    -v /dev/shm:/dev/shm elgalu/selenium

Then run functional tests dev command with auto reload:

npm run test:functional:dev

You can see the live browser at http://localhost:26080/vnc.html (password: fun).

You can use the full webdriverio API: http://webdriver.io/api.html.

You can run the underlying web server for debugging purposes:

npm run test:functional:dev:debug-server

Useful when you want to modify the functional test app.

It's not working!

Your docker installation must be compatible and ready to make the --net="host" works.

License

instantsearch.js is MIT licensed.

Contributing

We have a contributing guide, join us!

About

instantsearch.js is a library of widgets designed for high performance instant search experiences using Algolia

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 91.3%
  • CSS 4.7%
  • HTML 2.1%
  • Shell 1.9%