Code Monkey home page Code Monkey logo

instantsearch.js's Introduction

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="//cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.css" />
<script src="//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

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/

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!

instantsearch.js's People

Contributors

redox avatar pixelastic avatar shipow avatar bobylito avatar jerska avatar vvo avatar maxiloc avatar lae25c avatar elpicador avatar plnech avatar lukyvj avatar vond avatar kokliko avatar kle-roy avatar greenkeeperio-bot avatar algobot avatar seanpollock avatar reinaris avatar rayrutjes avatar peterdavehello avatar pborreli avatar olance avatar jerskouille avatar lucasc avatar taylornotwell avatar arnaudlimbourg avatar anirvan avatar alexandremeunier avatar

Stargazers

Chris Moulton avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.