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
.
Install
Install via npm (recommended)
The recommended method to install the JavaScript API client is via npm.
1
npm install algoliasearch@4
The npm package includes two versions of the API client:
algoliasearch-lite
: a search-only version in a small bundlealgoliasearch
: 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.
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.24.0/dist/algoliasearch-lite.umd.js"
integrity="sha256-b2n6oSgG4C1stMT/yc/ChGszs9EY/Mhs6oltEjQbFCQ="
crossorigin="anonymous"
></script>
<!-- default version -->
<script
src="https://cdn.jsdelivr.net/npm/algoliasearch@4.24.0/dist/algoliasearch.umd.js"
integrity="sha256-xuCFeRamFnnQX5L73AAMtQnz1S1xwihimc5dVgI5Kq8="
crossorigin="anonymous"
></script>
If you’re using JavaScript (ES6) modules, use these packages:
1
2
3
4
5
6
7
<script type="module">
// search only version
import algoliasearch from 'https://cdn.jsdelivr.net/npm/algoliasearch@4.24.0/dist/algoliasearch-lite.esm.browser.js';
// default version
import algoliasearch from 'https://cdn.jsdelivr.net/npm/algoliasearch@4.24.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.
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
// 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, only 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 suggests results as you type, which means you’ll generally search by prefix. In this case, the order of attributes is crucial in deciding 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
Once configured, you can search for contacts by attributes such as firstname
, lastname
, or company
(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
Use one of Algolia’s frontend libraries to build your search UI:
However, if you don’t want to use the libraries, you can build a custom UI:
- Design UI components with your preferred frontend system: a search box, results display, filters, and any other desired Algolia features
- Send search requests with the API client
- Parse the JSON response from the search request and display the results in your custom UI.