Quick Start with the JavaScript API Client

Install

You are currently reading the JavaScript API Client v4 documentation. Read our migration guide to learn how to upgrade from v3 to v4. You can still access the v3 documentation.

npm

npm is the recommended installation method when building large scale applications with the Algolia JavaScript API Client. It pairs nicely with module bundlers such as Webpack or Rollup.

1
npm install algoliasearch

CDN Links

For prototyping or learning purposes, algoliasearch is also available over CDN.

1
2
3
4
5
<!-- for the search only version -->
<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.5.1/dist/algoliasearch-lite.umd.js"></script>

<!-- for the default version -->
<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.5.1/dist/algoliasearch.umd.js"></script>

If you are using native ES Modules, there is also builds compatible with ES Modules:

1
2
3
4
5
6
7
<script type="module">
  // for the search only version
  import algoliasearch from 'https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.esm.browser.js';

  // for the default version
  import algoliasearch from 'https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch.esm.browser.js';
</script>

jsDelivr is a third-party CDN. We are not able to provide support regarding third party services.

Compatibility Note

algoliasearch supports all popular browsers, including Internet Explorer 11 and above, although some polyfills are required for older browsers: Promise, Object.entries, and Object.assign.

1
<script src="https://polyfill.io/v3/polyfill.min.js?features=Promise%2CObject.entries%2CObject.assign"></script>

Polyfill.io is a third-party CDN. We are not able to provide support regarding third party services.

algoliasearch supports Node.js 8.x and above.

Explanation of Different Builds

In the dist directory of the NPM package you will find different builds of algoliasearch. Here’s an overview of the difference between them:

• algoliasearch-lite search only version of the api client, optimized for size and search:

  • algoliasearch-lite.umd.js
  • algoliasearch-lite.esm.browser.js

• algoliasearch: default version of the api client, ready to work with all algolia features such as search, analytics, insights, and others:

  • algoliasearch.cjs.js
  • algoliasearch.umd.js
  • algoliasearch.esm.browser.js

Quick Start

In 30 seconds, this quick start tutorial will show you how to index and search objects.

Initialize the client

To start, you need to initialize the client. To do this, you need your Application ID and API Key. You can find both on your Algolia account.

1
2
3
4
5
6
7
8
9
10
11
// For the default version
const algoliasearch = require('algoliasearch');

// For the default version
import algoliasearch from 'algoliasearch';

// For the search only version
import algoliasearch from 'algoliasearch/lite';

const client = algoliasearch('YourApplicationID', 'YourAdminAPIKey');
const index = client.initIndex('your_index_name');

The API key displayed here is your Admin API key. To maintain security, never use your Admin API key on your front end, nor share it with anyone. In your front end, use the search-only API key or any other key that has search-only rights.

Push data

Without any prior configuration, you can start indexing 500 contacts in the contacts index using the following code:

1
2
3
4
5
6
7
8
const index = client.initIndex('contacts');
const contactsJSON = require('./contacts.json');

index.saveObjects(contactsJSON, {
  autoGenerateObjectIDIfNotExist: true
}).then(({ objectIDs }) => {
  console.log(objectIDs);
});

Configure

You can customize settings to fine tune the search behavior. For example, you can add a custom ranking by number of followers to further enhance the built-in relevance:

1
2
3
4
5
index.setSettings({
  'customRanking': ['desc(followers)']
}).then(() => {
  // done
});

You can also configure the list of attributes you want to index by order of importance (most important first).

Algolia is designed to suggest results as you type, which means you’ll generally search by prefix. In this case, the order of attributes is crucial to decide which hit is the best.

1
2
3
4
5
6
7
8
9
10
11
12
index.setSettings({
  searchableAttributes: [
    'lastname',
    'firstname',
    'company',
    'email',
    'city',
    'address'
  ]
}).then(() => {
  // done
});

Search

You can now search for contacts by firstname, lastname, company, etc. (even with typos):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Search for a first name
index.search('jimmie').then(({ hits }) => {
  console.log(hits);
});

// Search for a first name with typo
index.search('jimie').then(({ hits }) => {
  console.log(hits);
});

// Search for a company
index.search('california paint').then(({ hits }) => {
  console.log(hits);
});

// Search for a first name and a company
index.search('jimmie paint').then(({ hits }) => {
  console.log(hits);
});

Search UI

If you’re building a web application, you may be interested in using one of our front-end search UI libraries.

The following example shows how to quickly build a front-end search using InstantSearch.js

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.4.5/themes/satellite-min.css" integrity="sha256-TehzF/2QvNKhGQrrNpoOb2Ck4iGZ1J/DI4pkd2oUsBc=" crossorigin="anonymous">
</head>
<body>
  <header>
    <div id="search-box"></div>
  </header>

  <main>
      <div id="hits"></div>
      <div id="pagination"></div>
  </main>

  <script type="text/html" id="hit-template">
    <div class="hit">
      <p class="hit-name">
        {{#helpers.highlight}}{ "attribute": "firstname" }{{/helpers.highlight}}
        {{#helpers.highlight}}{ "attribute": "lastname" }{{/helpers.highlight}}
      </p>
    </div>
  </script>

  <script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.5.1/dist/algoliasearch-lite.umd.js" integrity="sha256-EXPXz4W6pQgfYY3yTpnDa3OH8/EPn16ciVsPQ/ypsjk=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.8.3/dist/instantsearch.production.min.js" integrity="sha256-LAGhRRdtVoD6RLo2qDQsU2mp+XVSciKRC8XPOBWmofM=" crossorigin="anonymous"></script>
  <script src="app.js"></script>
</body>

app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// Replace with your own values
const searchClient = algoliasearch(
  'YourApplicationID',
  'YourSearchOnlyAPIKey' // search only API key, not admin API key
);

const search = instantsearch({
  indexName: 'contacts',
  searchClient,
  routing: true,
});

search.addWidgets([
  instantsearch.widgets.configure({
    hitsPerPage: 10,
  })
]);

search.addWidgets([
  instantsearch.widgets.searchBox({
    container: '#search-box',
    placeholder: 'Search for contacts',
  })
]);

search.addWidgets([
  instantsearch.widgets.hits({
    container: '#hits',
    templates: {
      item: document.getElementById('hit-template').innerHTML,
      empty: `We didn't find any results for the search <em>"{{query}}"</em>`,
    },
  })
]);

search.start();