Quick Start

Algolia Quick Start

Creating a custom, real time search experience is easy with Algolia. Using this guide, you’ll be able to create a search that returns relevant results in milliseconds at the first keystroke, using either our sample data or your own dataset.

For this guide, you’ll need:

  • An Algolia Account

If you don’t already have an Algolia account, follow our signup process and choose a datacenter region. If you’re unsure which region to pick, we suggest the one closest to you.

Temp quick start 1

Signing up & choosing a datacenter

After signing up, creating a search experience is just three simple steps:
  1. Import the data you want to search
  2. Configure the relevance of results
  3. Implement the search UI using one of our front-end API clients

Our Interactive Tutorial covers all three of the above steps in a fast and simple way. If you’d like to get up and running as quick as possible — follow that to configure our sample index.

The first step to building your search on Algolia is configuring the data to search. This data will be modeled into an index which holds records. An index is an entity within Algolia where you import data through the indexing process, and query later through the search process — records are the individual data objects containing attributes which we will use to search and filter with. Let’s get started!

Indexing

Indexing can be accomplished in a few different ways—the recommended way is to import existing data from a database into Algolia.

The initial import and index creation can be done with an API client, or the online dashboard.

Using The Dashboard

If you have some of your own data you’d like to search, you can easily import it within the dashboard.

After naming your new index, navigate to the “Add new records” section of the Browse tab and add records manually, or through an import file via JSON or CSV.

Shown below is the import step using the actors.json file, representing an index of popular actors.

Temp quick start 2

Using the Dashboard & data file upload with actors.json 

Using The API

We also allow you to create and manage indices using our API. Click an icon below to learn more on how to index data using an API Client/Integration built for your language of choice.

You might need reformat some of your data or indices depending on your use case. Our guide on data-formatting will give you some best practices on how to best organize your data. 

After Indexing

Once you have an index, you can use the Browse Tab to query your dataset, or view your data as raw JSON.

After the initial import, the index needs to be kept in sync with the database. This is done in your application by implementing synchronisation logic (using one of our API clients) that will automatically replicate additions, updates, and deletions from your database to your Algolia’s indices.

Temp quick start 3

Querying “Nico” in the actors index 

Configuring your relevance

Right now, our newly created index has no defined ranking strategy, and without configuring our Searchable Attributes and Custom Ranking Attributes we won’t have quality, relevant results.

Searchable Attributes

Searchable Attributes (formerly named attributesToIndex in the API) allows us to list the attributes we want the engine to search in and order them by importance.

For our sample actors index, we will add the name and alternative_name fields here to search in. The name is more important than the alternative_name, so we will put it higher on the list. This configuration is shown below:

Custom Ranking Attributes

To have good relevance, it is critical to provide some business metrics in the Custom Ranking Attributes that will help rank the results. This could be number of sales for product, number of followers for a TV show, or, in our sample actors case, the rating given to each actor.

For our sample actors index, we will add the rating field here. This configuration is shown below.

Temp quick start 4

Setting Searchable Attributes & our Custom Ranking Attributes

The Ranking Tab includes many more options to configure your relevance and ranking exactly. For a deeper dive into these settings, check out the Relevance Guide

Building a UI

Now that we have a newly created index and a ranking strategy including Searchable Attributes and Custom Ranking, we’re just one step away from an awesome search experience: building the UI of our search.

We created some libraries to help you build the best UI and search experience: autocomplete.js to build dropdown menus, and instantsearch.js to build as-you-type results pages.

Autocomplete

autocomplete.js is our front-end library which turns any HTML <input> into a fast and fully-featured auto-completion menu, displaying results “as you type”.

Try it out for yourself — here is an autocomplete.js search field using our predefined actors index:

This is just a small example of what you can do with autocomplete.js - For a full reference, check out our Autocomplete Guide

Below is the autocomplete.js code for you to customize.

<input type="text" id="search-input" />
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>
<script>
  var client = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey')
  var index = client.initIndex('YourIndex');
  autocomplete('#search-input', {hint: false}, [
    {
      source: autocomplete.sources.hits(index, {hitsPerPage: 5}),
      displayKey: 'my_attribute',
      templates: {
        suggestion: function(suggestion) {
          return suggestion._highlightResult.my_attribute.value;
        }
      }
    }
  ]).on('autocomplete:selected', function(event, suggestion, dataset) {
    console.log(suggestion, dataset);
  });
</script>
.algolia-autocomplete {
  width: 100%;
}
.algolia-autocomplete .aa-input, .algolia-autocomplete .aa-hint {
  width: 100%;
  min-height: 30px;
  text-indent: 10px;
}
.algolia-autocomplete .aa-hint {
  color: #999;
}
.algolia-autocomplete .aa-dropdown-menu {
  width: 100%;
  background-color: #fff;
  border: 1px solid #999;
  border-top: none;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
  cursor: pointer;
  padding: 5px 4px;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
  background-color: #B2D7FF;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
  font-weight: bold;
  font-style: normal;
}

instantsearch.js is a library of UI widgets to help you build the best instant-search experience for your users.

We can easily implement an instant search with our actors index, showing the result of the actor and rating in our results:

Instant Search can be expanded with facets, filters and more to build an amazing search experience.

Shown below is some basic instant search code for you to customize yourself, and a gif of the final product you can build with our Instant Search Guide

<script src='https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js'></script>
<script>
    var search = instantsearch({
      appId: 'YourApplicationID',
      apiKey: 'YourSearchOnlyAPIKey',
      indexName: 'YourIndex'
    });
    search.addWidget(
      instantsearch.widgets.searchBox({
        container: '#search-box',
        autofocus: false,
        placeholder: 'Search for actors by name'
      })
    );
    search.addWidget(
      instantsearch.widgets.hits({
        container: '#hits-container',
        templates: {
          empty: 'No results',
          item: '{{{_highlightResult.name.value}}} : <strong>Rating {{rating}}</strong>'
        },
        hitsPerPage: 10
      })
    );
    search.start();
</script>

Temp quick start 5

Instantsearch in action

Try out the above demo live here!

Further Reading

That’s it! This quick start guide helped us get up and running, however there are many other features we can learn about. Below are a few links to continue learning about how to best implement Algolia.

Did you find this page helpful?

We're always looking for advice to help improve our documentation! Please let us know what's working (or what's not!) - we're constantly iterating thanks to the feedback we receive.

Send us your suggestions!