🎉 Try the public beta of the new docs site at algolia.com/doc-beta! 🎉
Guides / Getting started / Quick start

Quickstart with the JavaScript API client

On this page

Supported platforms

The Algolia JavaScript API client requires Node.js version 8.0 or later. The API client supports all popular browsers, including Internet Explorer 11 and newer. Older browsers require polyfills for: Promise, Object.entries, and Object.assign. You can include these polyfills in your HTML with Polyfill.io.

Copy 
1

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

Polyfill.io is a third-party CDN. Algolia doesn’t provide support for such third-party services.

Install

The recommended method to install the JavaScript API client is via npm.

Copy 
1

npm install algoliasearch

The npm package includes two versions of the API client:

  • algoliasearch-lite: a search-only version in a small bundle
  • algoliasearch: the default version for all operations, including indexing, search, and personalization

Both versions come as UMD and ESM modules.

Include from a content delivery network

For quick prototyping or exploration, you can also include the algoliasearch package in a <script> tag from a content delivery network.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13

<!-- search only version -->
<script
  src="https://cdn.jsdelivr.net/npm/algoliasearch@4.22.0/dist/algoliasearch-lite.umd.js"
  integrity="sha256-/2SlAlnMUV7xVQfSkUQTMUG3m2LPXAzbS8I+xybYKwA="
  crossorigin="anonymous"
></script>

<!-- default version -->
<script
  src="https://cdn.jsdelivr.net/npm/algoliasearch@4.22.0/dist/algoliasearch.umd.js"
  integrity="sha256-09Su4oLnpiFZJWk1HPm+P8R5PsH8IwHHmYatWY5q4w4="
  crossorigin="anonymous"
></script>

If you’re using JavaScript (ES6) modules, use these packages:

Copy 
1
2
3
4
5
6
7

<script type="module">
// search only version
import algoliasearch from 'https://cdn.jsdelivr.net/npm/algoliasearch@4.22.0/dist/algoliasearch-lite.esm.browser.js';

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

jsDelivr is a third-party CDN. Algolia can’t provide support for such third-party services.

Quickstart sample app

To download and run a self-contained example, see the JavaScript quickstart on GitHub.

In the following sections, you can learn how to index and search objects in 30 seconds.

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.

Copy 
1
2
3
4
5
6
7
8

// Default version (all methods)
import algoliasearch from 'algoliasearch';

// Search-only version
// import algoliasearch from 'algoliasearch/lite';

const client = algoliasearch('YourApplicationID', 'YourWriteAPIKey');
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 frontend, nor share it with anyone. In your frontend, 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:

Copy 
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:

Copy 
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.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12

index.setSettings({
  searchableAttributes: [
    'lastname',
    'firstname',
    'company',
    'email',
    'city',
    'address'
  ]
}).then(() => {
  // done
});

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

Copy 
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 app, you may be interested in using one of Algolias frontend search UI libraries.

The following example shows how to quickly build a frontend search using InstantSearch.js

index.html

Copy 
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
37
38
39
40
41

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/instantsearch.css@8.1.0/themes/satellite-min.css"
    integrity="sha256-p/rGN4RGy6EDumyxF9t7LKxWGg6/MZfGhJM/asKkqvA="
    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.22.0/dist/algoliasearch-lite.umd.js"
    integrity="sha256-/2SlAlnMUV7xVQfSkUQTMUG3m2LPXAzbS8I+xybYKwA="
    crossorigin="anonymous"
  ></script>
  <script
    src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.63.0/dist/instantsearch.production.min.js"
    integrity="sha256-tP2geWC/2cT8rjeVSRumDQXTieBNjUyZjvON1HzWqso="
    crossorigin="anonymous"
  ></script>
  <script src="app.js"></script>
</body>

app.js

Copy 
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()
Did you find this page helpful?
JavaScript v4