Quick Start with the JavaScript API Client
On this page
Install
From the back end
Node.js / React Native / Browserify / Webpack
We are Browserifyable and Webpack friendly:
1
npm install --save algoliasearch
TypeScript typings
The TypeScript typings are maintained by the community on DefinitelyTyped:
1
npm install --save-dev @types/algoliasearch
Bower
1
bower install algoliasearch -S
From the front end
You can either use a package manager like npm or include a script tag.
script tag using CDNs
Recommended: jsDelivr
jsDelivr is a global CDN delivery for JavaScript libraries.
To include the latest releases and all upcoming features and patches, use this:
1
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
Other CDNs
We recommend using jsDelivr, but algoliasearch is also available at:
jsDelivr is a third-party CDN. We are not able to provide support regarding third party services.
Search-only/lite client
We have a lightweight build available that can only perform searches. Use it when file size is important to you or if you want to include only what you need.
Find it on jsDelivr:
1
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearchLite.min.js"></script>
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
// const algoliasearch = require('algoliasearch');
// const algoliasearch = require('algoliasearch/reactnative');
// const algoliasearch = require('algoliasearch/lite');
// import * as algoliasearch from 'algoliasearch'; // When using TypeScript
// or just use algoliasearch if you are using a <script> tag
// if you are using AMD module loader, algoliasearch will not be defined in window,
// but in the AMD modules of the page
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.addObjects(contactsJSON, (err, content) => {
if (err) {
console.error(err);
}
});
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)']
}, (err, content) => {
console.log(content);
});
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'
]
}, (err, content) => {
console.log(content);
});
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', (err, { hits } = {}) => {
console.log(hits);
});
// Search for a first name with typo
index.search('jimie', (err, { hits } = {}) => {
console.log(hits);
});
// Search for a company
index.search('california paint', (err, { hits } = {}) => {
console.log(hits);
});
// Search for a first name and a company
index.search('jimmie paint', (err, { 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.3.1/themes/algolia-min.css" integrity="sha256-HB49n/BZjuqiCtQQf49OdZn63XuKFaxcIHWf0HNKte8=" 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@3.33.0/dist/algoliasearchLite.min.js" integrity="sha256-3Laj91VXexjTlFLgL8+vvIq27laXdRmFIcO2miulgEs=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@3.4.0/dist/instantsearch.production.min.js" integrity="sha256-pM0n88cBFRHpSn0N26ETsQdwpA7WAXJDvkHeCLh3ujI=" 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.addWidget(
instantsearch.widgets.configure({
hitsPerPage: 10,
})
);
search.addWidget(
instantsearch.widgets.searchBox({
container: '#search-box',
placeholder: 'Search for contacts',
})
);
search.addWidget(
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();
