instantsearch Documentation

️ Libraries for building performant and instant search and and discovery experiences with Algolia. Compatible with JavaScript, TypeScript, React and Vue.

4,065 stars TypeScript TypeScript 49 files · ~33,915 tokens #algolia#instantsearch#react#recommend#search#vanilla#vue#widgets
RAW Doc

Technical Documentation: algolia/instantsearch

ℹ️ Provenance: Multi-Tier Ingestion · CodeWiki Reference

Overview (`README.md`)

License Build Status

InstantSearch is a JavaScript library that lets you create an instant-search result experience using Algolia’s search API.

There are multiple wrappers for popular frameworks, such as React InstantSearch and Vue InstantSearch.

It is part of the InstantSearch family which is designed for different platforms:

InstantSearch | InstantSearch Android | InstantSearch iOS

Table of contents

Packages

Package Version Description
algoliasearch-helper Helper for implementing advanced search features with Algolia
create-instantsearch-app Command-line utility to quickly bootstrap a project with InstantSearch
instantsearch.css Default CSS themes for InstantSearch
instantsearch.js InstantSearch.js
react-instantsearch React InstantSearch bundled library
react-instantsearch-core Runtime-independent React InstantSearch version
vue-instantsearch Vue InstantSearch

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. Fork the project
  2. Clone the repository
  3. Install the dependencies: yarn
  4. Pick a package to work on and cd into it (e.g. cd packages/react-instantsearch)

Please read our contribution process to learn more.

License

InstantSearch is MIT licensed.

Overview (`packages/algoliasearch-helper/README.md`)

Coming from V1 (or js client v2)? Read the migration guide to the new version of the Helper.

Coming from V2? Read the migration guide to the new version of the Helper.

The JavaScript helper is an advanced library we provide to our users. If you are looking to build a complete search interface, we recommend you to use InstantSearch. If you want to build an autocomplete menu, see Autocomplete.

algoliasearch-helper

This module is the companion of the algolia/algoliasearch-client-javascript. It helps you keep track of the search parameters and provides a higher level API.

See the helper in action

Version License Downloads jsDelivr Hits

Features

  • Search parameters management
  • Facets exclusions
  • Pagination
  • Disjunctive faceting (search on two or more values of the same facet)

Examples

Vanilla JavaScript

A small example that uses Browserify to manage modules.

js
var algoliasearch = require('algoliasearch');
var algoliasearchHelper = require('algoliasearch-helper');

var client = algoliasearch('appId', 'apiKey');

var helper = algoliasearchHelper(client, 'indexName', {
  facets: ['mainCharacterFirstName', 'year'],
  disjunctiveFacets: ['director'],
});

helper.on('result', function (event) {
  console.log(event.results);
});

helper.addDisjunctiveFacetRefinement('director', 'Clint Eastwood');
helper.addDisjunctiveFacetRefinement('director', 'Sofia Coppola');

helper.addNumericRefinement('year', '=', 2003);

// Search for any movie filmed in 2003 and directed by either C. Eastwood or S. Coppola
helper.search();

See more examples in the examples folder

AngularJS module

js
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.angular.js"></script>
<script src="dist/algoliasearch.helper.min.js"></script>

<script type="text/javascript">
angular.module('searchApp', ['ngSanitize', 'algoliasearch'])
.controller('searchController', ['$scope', '$sce', 'algolia', function($scope, $sce, algolia) {
  var algolia = algolia.Client('applicationId', 'apiKey');
  $scope.q = '';
  $scope.content = null;
  $scope.helper = algoliasearchHelper(algolia, 'indexName', {
    facets: ['type', 'shipping'],
    disjunctiveFacets: ['category', 'manufacturer'],
    hitsPerPage: 5,
  });
  $scope.helper.on('result', function(event) {
    $scope.$apply(function() {
      $scope.content = event.results;
    });
  });
  $scope.toggleRefine = function($event, facet, value) {
    $event.preventDefault();
    $scope.helper.toggleRefine(facet, value).search();
  };
  $scope.$watch('q', function(q) {
    $scope.helper.setQuery(q).search();
  });
  $scope.helper.search();
}]);
</script>

You can see the full Angular example here

Helper cheatsheet

There is also a complete JSDoc

Add the helper in your project

Regular `