Whether a field is searchable is also indicated in the overview by showing a magnifying glass next to the field.
A good search functionality on a website is often requested by our clients. Over the years, we have gained a lot of experience in this area. Sometimes, we create fully custom solutions, and other times, we use external platforms. Lately, we have been using Algolia more and more.
What is Algolia?
Algolia is a cloud service used to retrieve search results. It searches in an index that can be fully customized according to specific needs and configurations. An object within an index has an "objectID" field that must be unique. Additionally, the user has complete freedom in specifying which fields to include. Each field can be set as searchable or used as a filter, sorted, and included in search results, among other options.
Algolia offers various implementation possibilities, and its search speed is significantly higher than most other services we have explored. It is used entirely serverless and supports a wide range of languages. In addition to languages, UI libraries, including some specifically designed for React, are provided. Due to the numerous possibilities, the documentation can be overwhelming. It's like seeing the forest for the trees. Therefore, I will explain the main steps and concepts below to set up a solid basic search functionality in JavaScript using Algolia.
Setup
Most of our websites are built with Next.js. Unfortunately, Algolia's React UI libraries are not fully compatible: the react-instantsearch-hooks-server library does not support the /app structure of Next.js 13. Additionally, the react-instantsearch library uses a router object when you want to use search parameters in the URL of your page. This router object cannot be used in server-side rendering. Therefore, the setup described below is only the basic setup without using UI libraries.
To start, we install algoliasearch via yarn or npm.
yarn add algoliasearch
# or
npm install algoliasearchIn the Algolia dashboard, you create an application. The necessary API keys can be found in the settings at the bottom left. Now, we can create a client with these keys and create or access an index.
import algoliasearch from 'algoliasearch';
const client = algoliasearch('ApplicatieID', 'APISleutel');
const index = client.initIndex('mijn_index');You can add a record to an index using saveObject. This method takes a JSON object with an attribute "objectID." This objectID must be unique for each record. Other attributes can be added as desired, with values that can be text, numbers, or lists.
index.saveObject({
objectID: 1,
titel: "Mijn titel",
omschrijving: "Lorem ipsum",
tags: [
"blog",
"test"
]
})Searching
Once the index is created, you can search using the search function. If you only need basic search, you can use "algoliasearch/lite." The search function expects two arguments: a query and an object with search options.
import algoliasearch from 'algoliasearch/lite';
const client = algoliasearch('ApplicatieID', 'APISleutel');
const index = client.initIndex('mijn_index');
index.search('ipsum', {
filters: 'tags:blog'
})The query argument is used to search in all fields marked as searchable.
In Algolia, the searchable attributes are set per index. You can add these fields in the "searchable attributes" configuration. The order indicates their importance. In the example below, results with the query in the "title" field will be shown first.
The filters field can be used to filter based on fields marked as facets.
To make a filter like "tags:blog" work, the facet "type" must first be added to the index configuration in Algolia.
You can use the terms 'AND' and 'NOT' to add multiple conditions or a negative condition.
{
filters: "tags:blog AND NOT tags:test"
}
One last setting I want to mention is sorting. By default, it's already quite good, and since "searchable attributes" mostly determines the order, it's not immediately necessary to add anything here. However, you can add additional sorting if desired.
Instead of adjusting the configuration of an index in the Algolia dashboard, you can also do it in code. Here's an example:
index.setSettings({
paginationLimitedTo: 10,
searchableAttributes: [
'title',
'description',
'tags',
'content',
'date'
],
'attributesForFaceting': [
'type',
'tags'
],
'attributesToSnippet': [
'description',
'content'
],
attributesToRetrieve: [
'data'
],
customRanking: [
'asc(date_timestamp)'
]
})Summary
- Algolia works entirely serverless and provides fast results.
- The service offers many implementation possibilities and is easy to set up.
- It can be fully customized according to the client's needs.