How to use Algolia for instant search
Tags: javascript, algolia, webdev, tutorial
Published: 2019-10-17 13:42:22

---
title: How to use Algolia for instant search
published: true 
date: 2019-10-16 18:30:38 UTC
tags: javascript,algolia,webdev,tutorial
canonical_url: https://blog.logrocket.com/how-to-use-algolia-for-instant-search/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/lnluyq69awjavqqcv0l0.png
---
**Written by [Anjolaoluwa Adebayo-Oyetoro](https://blog.logrocket.com/author/anjolaoluwaadebayooyetoro/)**✏️

One of the most important parts of building any website or web app is its search functionality. Search functionality helps to make interactions with products easier and faster. We live in a world where every millisecond counts and a bad search experience could lead to users discontinuing the use of a product.

In this tutorial, we will :

- Take a look at Algolia and how we can use it to build instant search experiences for our application
- See how the [Algolia InstantSearch library](https://www.algolia.com/products/instantsearch/) helps remove the problems associated with building and maintaining a search-as-you-type system
- See how InstantSearch helps improve the performance and efficiency of our search system
- Also, look at how to get started implementing Algolia InstantSearch in your application by building a movie search app

The final version of our app should look something like this: ![complete movie app ui](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2019/10/movieapp.png?resize=730%2C356&ssl=1)

## Prerequisites:

The following prerequisites are needed to follow along with this tutorial:

- Have [Node.js 8.0](https://nodejs.org/en/download/) or higher and [Yarn](https://yarnpkg.com/lang/en/)/ [npm 5.2 or higher](https://www.npmjs.com/get-npm) installed on your PC
- Basic knowledge of JavaScript and React fundamentals
- An account with [Algolia](https://www.algolia.com/users/sign_up)

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

## Getting started

### What is instant search?

It’s a predictive search feature that tries to anticipate and guess the most likely completion of what a user’s search query is and displays information that is relevant to the user’s input instantly with every keystroke inputted in the search box.

### What is Algolia?

According to its [website](https://www.algolia.com):

> Algolia is search-as-a-service solution that helps you build real-time search into your app with customizable, prebuilt widgets along with tools that make building search systems easy.

### How does Algolia InstantSearch work?

To understand how the Algolia InstantSearch service works we need to know the following key terms:

- `INDEX` — The set of information which will be used in our application for querying and searching. It is a collection of `RECORDS`
- `RECORDS` — An array of JSON objects, these objects contain data/information that is eventually shown to the user. They are composed of `ATTRIBUTES`
- `ATTRIBUTES` — Key-value pair contents that describe their parent `RECORD`

## The InstantSearch logic

The InstantSearch package interacts with the [Algolia API](https://www.algolia.com/doc/rest-api/search/), when a user enters a keystroke in the search box, a request is made to the Algolia servers, which in turn compares the search query to the available `INDEX` and filters through the `RECORD` for the ones that contain the relevant `ATTRIBUTE` then sends back the `RECORDS` that are relevant to the search term.

![InstantSearch process](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2019/10/instantsearchindex.png?resize=971%2C804&ssl=1)

Algolia provides us with preconfigured UI widgets that serve as building blocks for our Algolia powered app. These widgets leverage upon the Algolia API to help ease interacting with and rendering data from the Algolia API.

![Requests being made on every keystroke](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2019/10/algoliarequests.png?resize=1322%2C404&ssl=1)

The widgets we will be using in this tutorial are:

- `InstantSearch` —This widget is the parent component of all Algolia Instant search widgets. It interfaces directly with the Algolia API
- `SearchBox` — This component houses the search bar and provides a means to get user queries
- `RefinementList` — This is a widget that provides a set of filters to refine the query results data gotten from the Algolia API according to their attributes
- `Hits` — This is a widget that displays all the results for a particular query
- `HighLights` — This widget helps with highlighting the attribute of a query result
- `HitsPerPage` — This widget is used to regulate the number of results to be shown per page
- `Pagination` — This widget is used to change `Hit` pages
- `Stats` — This widget shows the amount of time it took to retrieve data and the number of hits that match a search query

For a full list of the React InstantSearch widgets and what they do, refer to [this API reference](https://www.algolia.com/doc/api-reference/widgets/react/).

## Building our movie search app

We will be using the [create-react-app](https://create-react-app.dev/) boilerplate to bootstrap our project so we don’t have to worry about configurations to get started with using Algolia for instant search in your application.

Run this command to create a new React app with the boilerplate:

```jsx
#Using NPM
npx create-react-app react-instant

#or, Using Yarn
yarn create react-app react-instant
```

Then change into the directory for our project using the command:

```jsx
cd react-instant
```

Next, we install the React instant search package using the command:

```jsx
npm install react-instantsearch-dom
#or, Using Yarn
yarn add react-instantsearch-dom
```

We will also need to install the [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript) package, Algoliasearch is an HTTP client that communicates with the Algolia API.

Run the command:

```jsx
npm install algoliasearch
or 
yarn add algoliasearch
```

Create a folder named `components` in your `src` folder, this folder will house the `Search` component of our app.

We will need to remove the unneeded contents of our boilerplate, open your `src/App.js` and delete the unnecessary code. It should look something like this:

```jsx
import React from 'react';
import './App.css';
function App() {
  return (
        <div className="App">
        
        </div>
  );
}
export default App;
```

Proceed to create a file named `Search.js` in your components folder and include the following in the file:

```jsx
# /src/components/Search.js

import React from 'react';
function Search () {            
        return (

          );
}
export default Search;
```

Then we proceed to import `algoliasearch` and the `InstantSearch` component into our `Search.js` file:

```jsx
import algoliasearch from 'algoliasearch'
import { InstantSearch } from 'react-instantsearch-dom'
```

After importing, initialize it in the search component:

```jsx
return(
   <InstantSearch>

   </InstantSearch>

 );
```

We then proceed to configure our app to use our API key, app ID and index name.

For the purpose of this tutorial, we will be using an [already configured index](https://github.com/algolia/datasets/tree/master/movies) provided by Algolia for test purposes that includes all the data we would need to create our app.

The value for these configurations should be replaced with the one you got from your Algolia dashboard.

Include the following in your `Search.js` file, just after your import statements.

```jsx
const searchClient = algoliasearch("latency", "6be0576ff61c053d5f9a3225e2a90f76")
```

Add the `searchClient` as an attribute of your `InstantSearch` component and include your `indexName` as an attribute with a value of `movies`.

```jsx
function Search() {

    return (
        < InstantSearch searchClient={searchClient} indexName="movies" >

        </InstantSearch >
    );
....
```

Next, we create a `Header` component that will contain our `SearchBox` and import the `SearchBox` component from InstantSearch:

```jsx
import { InstantSearch, SearchBox } from 'react-instantsearch-dom';
....
const Header = () => (
    <header className="header">
        <SearchBox
            className="search-bar"
            translations={{placeholder: 'Search for Movies'}}
        />
    </header>
)
....
```

Then we proceed to configure our `Hits` to receive results from the Algolia API:

```jsx
const Hit = ({ hit }) => (
    <a href={"/"} >
        <div className="card">
            <div className="card-image">
                <img src={hit.image} alt={hit.name} className="image"/>
            </div>
          <div className="card-contents">
                <Highlight attribute="title" hit={hit} className="card-title" />
                <Highlight attribute="year" hit={hit}  className="card-year"/>
                <div className="card-rating">Rating: {hit.rating}</div>
                <div className="card-genre"> <span>{hit.genre[0]}</span> <span>{hit.genre[1]}</span> </div>
            </div>
        </div>
    </a>
);
```

Our `Hits` component receives `hit` as a prop then we would use the `hit` props to interact with our [preconfigured index](https://github.com/algolia/datasets/tree/master/movies) data.

Next, we create a content component that will house every content that would be displayed in our app and we import the `Hits`, `Hightlight`, `Pagination` and the `SortBy` component into it:

```jsx
import { InstantSearch, SearchBox, Hits, Highlight, Stats, SortBy, Pagination } from 'react-instantsearch-dom';
....
const Content = () => (
    <main>
        <div className="information">
            <div className="stats"> <Stats/> </div>
            <div className="">
                <SortBy defaultRefinement="movies"
                    items={[
                        { value: 'movies', label: 'Most Relevant' },   
                    ]}
                />
            </div>
        </div>


        <Hits hitComponent={Hit} />
        <div> <Pagination/> </div>
    </main>
);
....
```

The contents of your `Search.js` file should now look similar to this:

```jsx
import React from 'react';
import algoliasearch from 'algoliasearch'
import { InstantSearch, SearchBox, Hits, Highlight, Stats, SortBy, Pagination } from 'react-instantsearch-dom';


const searchClient = algoliasearch("latency", "6be0576ff61c053d5f9a3225e2a90f76")


function Search() {

    return (
        < InstantSearch searchClient={searchClient} indexName="movies" >
            <Header />
            <div className="body-content">
                <Content/>
            </div>
        </InstantSearch >
    );        
};
const Header = () => (
    <header className="header">
        <SearchBox
            className="search-bar"
            translations={{ placeholder: 'Search for Movies' }}
        />
    </header>
);
const Hit = ({ hit }) => (
    <a href={"/"} >
        <div className="card">
            <div className="card-image">
                <img src={hit.image} alt={hit.name} className="image"/>
            </div>
             <div className="card-contents">                
                <Highlight attribute="title" hit={hit} className="card-title" />
                <Highlight attribute="year" hit={hit}  className="card-year"/>
                <div className="card-rating">Rating: {hit.rating}</div>
                <div className="card-genre"> <span>{hit.genre[0]}</span> <span>{hit.genre[1]}</span> </div>
            </div>
        </div>
    </a>
);
const Content = () => (
    <main>
        <div className="information">
            <div className="stats"> <Stats/> </div>
            <div className="">
                <SortBy defaultRefinement="movies"
                    items={[
                        { value: 'movies', label: 'Most Relevant' },   
                    ]}
                />
            </div>
        </div>
        <Hits hitComponent={Hit} />
        <div> <Pagination/></div>
    </main>
);
export default Search;
```

Create a `Search.css` file inside your components folder and include the following styles to make our app look beautiful:

```jsx
.header{
    padding-top: 4em;
    width: 100%;
    display: flex;
    background-color: #dce2e9;
    height: 20vh
}
.search-bar{
    display: flex;
    justify-content: center;
    width: 100%
}
input{
    min-width: 500px;
    border: none;
    border-radius: .5em;
    padding: 15px

}
.ais-SearchBox-submit{
    width: 100px;
    padding: 15px;
    color: #c4c4c4
}
.ais-SearchBox-reset{
    display: none
}
main{
    width: 100%;
}
ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap
}
li{
    list-style-type: none;
}
.ais-Hits-item{
    width: 32%;
}
.card{
    background-color: #f9f9f9;
    display: flex;
    border-radius: 10px;
    margin:20px;
    padding: 15px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.card-contents{
    margin-left: 20px;
    display: flex;
    align-content: center;
    flex-direction: column;
    justify-content: space-between
}
.card-title{
    font-weight: bold
}
.card-genre > span{
    font-size: 15px;
    width: 20px;
    padding: 4px;
    background-color: #c4c4c4
}
.information{
    padding-top: 10px;
    display: flex;
    justify-content: space-around;
    font-size: 11px
}
a{
    text-decoration: none
}
a:visited{
    color: black;
}
.ais-Pagination-list{
    display: flex;
    justify-content: center
}
.ais-Pagination-item{
    margin: 5px
}
```

Then import the `Search` component into our `App.js` file:

```jsx
....
import Search from './components/Search'

....
<div className="App">
  <Search/>

</div>
....
```

Run the following command on your terminal:

```jsx
#using NPM
npm start

#or,using yarn
yarn start
```

Our App should look similar to this:

{% codesandbox mmeff %}

And when we type in a search query it refines our movie cards accordingly.

## Conclusion

We’ve seen how to configure Algolia in our React app. To learn more about Algolia search services you can check out its [documentation](https://www.algolia.com/doc/).

You can check out the repository to this tutorial on [GitHub](https://github.com/Jolaolu/react-instant) also a deployed version of the working [app](https://instanta.now.sh/).
* * * 
**Editor's note:** Seeing something wrong with this post? You can find the correct version [here](https://blog.logrocket.com/how-to-use-algolia-for-instant-search/).

## Plug: [LogRocket](https://logrocket.com/signup/), a DVR for web apps
 
![LogRocket Dashboard Free Trial Banner](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png?resize=1200%2C677&ssl=1)
 
[LogRocket](https://logrocket.com/signup/) is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
 
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
 
[Try it for free](https://logrocket.com/signup/).
* * *
The post [How to use Algolia for instant search](https://blog.logrocket.com/how-to-use-algolia-for-instant-search/) appeared first on [LogRocket Blog](https://blog.logrocket.com).