Search by Algolia
Feature Spotlight: Query Rules
product

Feature Spotlight: Query Rules

You’re running an ecommerce site for an electronics retailer, and you’re seeing in your analytics that users keep ...

Jaden Baptista

Technical Writer

An introduction to transformer models in neural networks and machine learning
ai

An introduction to transformer models in neural networks and machine learning

What do OpenAI and DeepMind have in common? Give up? These innovative organizations both utilize technology known as transformer models ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What’s the secret of online merchandise management? Giving store merchandisers the right tools
e-commerce

What’s the secret of online merchandise management? Giving store merchandisers the right tools

As a successful in-store boutique manager in 1994, you might have had your merchandisers adorn your street-facing storefront ...

Catherine Dee

Search and Discovery writer

New features and capabilities in Algolia InstantSearch
engineering

New features and capabilities in Algolia InstantSearch

At Algolia, our business is more than search and discovery, it’s the continuous improvement of site search. If you ...

Haroen Viaene

JavaScript Library Developer

Feature Spotlight: Analytics
product

Feature Spotlight: Analytics

Analytics brings math and data into the otherwise very subjective world of ecommerce. It helps companies quantify how well their ...

Jaden Baptista

Technical Writer

What is clustering?
ai

What is clustering?

Amid all the momentous developments in the generative AI data space, are you a data scientist struggling to make sense ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What is a vector database?
product

What is a vector database?

Fashion ideas for guest aunt informal summer wedding Funny movie to get my bored high-schoolers off their addictive gaming ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Unlock the power of image-based recommendation with Algolia’s LookingSimilar
engineering

Unlock the power of image-based recommendation with Algolia’s LookingSimilar

Imagine you're visiting an online art gallery and a specific painting catches your eye. You'd like to find ...

Raed Chammam

Senior Software Engineer

Empowering Change: Algolia's Global Giving Days Impact Report
algolia

Empowering Change: Algolia's Global Giving Days Impact Report

At Algolia, our commitment to making a positive impact extends far beyond the digital landscape. We believe in the power ...

Amy Ciba

Senior Manager, People Success

Retail personalization: Give your ecommerce customers the tailored shopping experiences they expect and deserve
e-commerce

Retail personalization: Give your ecommerce customers the tailored shopping experiences they expect and deserve

In today’s post-pandemic-yet-still-super-competitive retail landscape, gaining, keeping, and converting ecommerce customers is no easy ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Algolia x eTail | A busy few days in Boston
algolia

Algolia x eTail | A busy few days in Boston

There are few atmospheres as unique as that of a conference exhibit hall: the air always filled with an indescribable ...

Marissa Wharton

Marketing Content Manager

What are vectors and how do they apply to machine learning?
ai

What are vectors and how do they apply to machine learning?

To consider the question of what vectors are, it helps to be a mathematician, or at least someone who’s ...

Catherine Dee

Search and Discovery writer

Why imports are important in JS
engineering

Why imports are important in JS

My first foray into programming was writing Python on a Raspberry Pi to flicker some LED lights — it wasn’t ...

Jaden Baptista

Technical Writer

What is ecommerce? The complete guide
e-commerce

What is ecommerce? The complete guide

How well do you know the world of modern ecommerce?  With retail ecommerce sales having exceeded $5.7 trillion worldwide ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Data is king: The role of data capture and integrity in embracing AI
ai

Data is king: The role of data capture and integrity in embracing AI

In a world of artificial intelligence (AI), data serves as the foundation for machine learning (ML) models to identify trends ...

Alexandra Anghel

Director of AI Engineering

What are data privacy and data security? Why are they  critical for an organization?
product

What are data privacy and data security? Why are they critical for an organization?

Imagine you’re a leading healthcare provider that performs extensive data collection as part of your patient management. You’re ...

Catherine Dee

Search and Discovery writer

Achieving digital excellence: Algolia's insights from the GDS Retail Digital Summit
e-commerce

Achieving digital excellence: Algolia's insights from the GDS Retail Digital Summit

In an era where customer experience reigns supreme, achieving digital excellence is a worthy goal for retail leaders. But what ...

Marissa Wharton

Marketing Content Manager

AI at scale: Managing ML models over time & across use cases
ai

AI at scale: Managing ML models over time & across use cases

Just a few years ago it would have required considerable resources to build a new AI service from scratch. Of ...

Benoit Perrot

VP, Engineering

Looking for something?

facebookfacebooklinkedinlinkedintwittertwittermailmail

You’ve likely seen autocomplete searches before, where users get suggested searches as they type. Not only does it save keystrokes and time for your users, it can also uncover potential results they might not have found otherwise.

For example, if someone types “apple” into your product catalog search, they’ll get various suggestions as they type. To provide matches, you’ll need to pull these potential results from somewhere — a database, an API, or a list of known terms.

Before going down the rabbit hole into building your own autocomplete, let’s take a look at a robust, production-level solution: 

We’ve written about this autocomplete solution, which can transform the simple drop down into a rich and multi-faceted interactive user experience. When today’s users start typing a query, they expect to see more than just suggested queries — they want access to a variety of datasources and results, multiple filters, categories, and images with helpful and highlighted text. 

This autocomplete library is open sourced and fully customizable for any industry and UI/UX design.

In this article, we take a step back and show you how to build a simple autocomplete with Javascript, to help you understand the principles of our more production-level version. We’ll also show that to tune your autocomplete search correctly, you’ll need to work with additional front-end and back-end code that does the heavy lifting for you.

Related Links –

  1. See all possible “types” of Autocomplete experiences.
  2. A comprehensive “Get started” guide for Autocomplete.
  3. A guide explaining how to integrate Autocomplete with Instantsearch JS.

Basic implementation using static data

To start, let’s create a proof of concept autocomplete example. Our goal is to allow the user to start typing into a search box and see matching terms below the search form — autocompleting the user’s input as it’s typed into a search bar.

Any JavaScript autocomplete search is going to need the following:

  • HTML for the search form
  • CSS to display the results
  • A data source of results
  • JavaScript, of course

Since we’re starting with a basic implementation, we’ll return exact match results from a set of predetermined search terms. We’ll use an online store as our example, where the user is searching for a specific item. If what they have typed in the search box can be completed to match an item, the website suggests that item.

Let’s see how that search box looks in some simple HTML:

<form autocomplete="off"><input type="text" name="q" id="q" onKeyUp="showResults(this.value)" />
<div id="result"></div>
</form>

Disabling autocomplete (autocomplete = off) might seem a little strange, but this needs to be done to disable the browser’s automatic suggestions, which will get in the way of our own. 

A couple of other things to note are the onKeyUp attribute, which calls our JavaScript function, and uses an empty div for results.

Next, here’s the JavaScript to receive the search value, match it against the known terms, and display suggestions:

var search_terms = ['apple', 'apple watch', 'apple macbook', 'apple macbook pro', 'iphone', 'iphone 12'];

function autocompleteMatch(input) {
  if (input == '') {
    return [];
  }
  var reg = new RegExp(input)
  return search_terms.filter(function(term) {
	  if (term.match(reg)) {
  	  return term;
	  }
  });
}

function showResults(val) {
  res = document.getElementById("result");
  res.innerHTML = '';
  let list = '';
  let terms = autocompleteMatch(val);
  for (i=0; i<terms.length; i++) {
    list += '<li>' + terms[i] + '</li>';
  }
  res.innerHTML = '<ul>' + list + '</ul>';
}

The terms are stored as a simple JavaScript array at the top. The browser will call the showResults function after every single keypress. Then it passes the current search to an autocompleteMatch function to get the list of matched terms. Finally, the results are added to the div as an unordered list.

When you run this code, you’ll notice that matched terms appear as bullet points below the search box. That’s not exactly a great experience. We’d rather see something like this:

A little CSS can complete the style, which you can customize to match your site:

#result {
  border: 1px dotted #ccc;
  padding: 3px;
}
#result ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#result ul li {
  padding: 5px 0;
}
#result ul li:hover {
  background: #eee;
}

While we now have a basic autocomplete with JavaScript implementation, it’s still far from something you’d use in production. For one, the data comes from a single static array, hard-coded within our JavaScript. Let’s take a step toward a more realistic example by incorporating a back-end search request.

Back-end-driven: autocomplete with an internal API

The basic autocomplete with JavaScript example shows most of the interaction patterns users will expect. There are always design and interaction improvements to consider, but the concept remains: when the user types a few keystrokes into a search bar, they will see relevant potential searches or results below. The difference — and the subject of the remainder of this post — is where we retrieve those results.

In most sufficiently complex examples, you won’t have a finite list of potential queries. The static implementation in the first section is a proof of concept that won’t cut it in production. You’ll need to send your search to a back end to return potential matches, which means an internal API to handle the query.

We might update the showResults function in the previous section to look something like this:

function showResults(val) {
  res = document.getElementById("result");
  res.innerHTML = '';
  if (val == '') {
    return;
  }
  let list = '';
  fetch('/suggest?q=' + val).then(
   function (response) {
     return response.json();
   }).then(function (data) {
     for (i=0; i<data.length; i++) {
       list += '<li>' + data[i] + '</li>';
     }
     res.innerHTML = '<ul>' + list + '</ul>';
     return true;
   }).catch(function (err) {
     console.warn('Something went wrong.', err);
     return false;
   });
}

Rather than compare the current search to potential queries with the autocompleteMatch function, we call the local API endpoint at /suggest. This will return a JSON array of potential matches instead.

To test this out, you could set up your own local API with Node or any other back-end language. For example, the following Express route will provide suggestions to anything passed to the q querystring:

var express = require('express');
var router = express.Router();

const data = ["apple","apple watch","iphone","iphone x","apple macbook","apple macbook air","apple macbook air pro 13"];

router.get('/suggest', function(req, res, next) {
  console.log(req.query)
  res.setHeader('Content-Type', 'application/json');
  res.end(JSON.stringify(data.filter(value => value.includes(req.query.q))));
});

module.exports = router;

Note, we might see a performance impact if we deployed this to a server. Each lookup comes after a single keypress, which may not make sense when users are typing multiple keystrokes. You’ll want to incorporate a delay in your front end before you connect to the back end through the Internet, such as with network throttling.

Adding a query suggestions database

This code has the same finite dataset of terms we used previously. We’re still prototyping. You’ll need to connect your back-end API to a database. The query delay will become even more important when each call includes a round trip HTTP call, which itself calls a database.

The benefit is clear, though: by accessing a database, you can suggest a robust set of query suggestions that match the user’s characters as they type. A query suggestions database contains prior queries saved by the search engine as it processes every query. These queries are usually ranked by popularity. Google provides an example of this:

There’s a lot to consider for your database. Is it especially built for search terms? Or do you need to connect to an existing source, such as a product or content database? And how will you tune it to these frequent, short queries?

These are big questions that will likely point to a need to pull results from multiple sources, a concept called federated search.

Federated search: query multiple dynamic data sources

Most search engines you’ve used are likely pulling from more than one database. Unlike the basic autocomplete example, they don’t have the benefit of a small, static set of potential searches. If you’re concerned about the performance impact on a single database, it’s even more difficult with federated search.

Not only do you have multiple sources, but each is dynamic. The products database may update nightly, while the inventory management system aims to be real-time. Your reviews are likely stored elsewhere and published several times per day. You may want comments to be available more quickly to generate discussion.

Each of these databases has fields you probably want searchable — and others you don’t. Product names, descriptions, and metadata clearly need to be included. But internal identifiers or product codes might not be necessary. Similarly, user-generated content can provide rich search terms, but you’ll want to make sure personal information like email or IP addresses are kept from the search suggestions.

Once you’ve determined which data sources to use in your federated search, you need to ensure it can be reached from the front end with a single call, as shown in the back-end-driven autocomplete section. In other words, you likely don’t want the front end calling multiple data sources directly after every few keystrokes — this would be both inefficient and potentially expose too much of your internal data model. Instead, you’ll likely use one of two architectures:

The left image shows how your front end calls a back-end API that itself makes multiple requests to your databases. It would need to merge and filter these responses into a single set of search suggestions or results for the front end to display.

Alternatively, the right shows a dedicated search database for a single place to query. You would need to update this database based on the other sources periodically. The difference from the other architecture is that the merging and filtering of results happen ahead of time. In many cases, search does not need to be as real-time as direct lookups. For example, a user might expect a comment to appear instantly on the page, but wouldn’t notice if it took an hour or more to appear in a search.

There are many different approaches to how you merge and filter federated search results. To provide the best user experience for searchers, you may want to consider some additional ways to tune your results.

Beyond autocomplete: what robust search requires

Implementing great autocomplete is more than knowing the right combination of JavaScript, HTML, and CSS. You need to access the right data sources and provide the results from a back end so your front end is able to easily display it to the user. Further, you’ll find the potential improvements continue to stack up the more you consider what’s possible.

For example, there are a couple things to notice in the search suggestions above:

  1. Though “iphone” is misspelled, the results flexibly assume what the user meant
  2. For some terms, the user can drill down by category for a more specific search

Both of these features take some additional engineering to achieve. Your database may support fuzzy searching for spelling mistakes, though you’ll need to make sure the implementation of fuzzy search doesn’t decrease performance. With this in mind, we implemented a typo tolerance feature that does not slow down the query.

The category search is more advanced and requires additional structure within your search database. We’ve written a guide about faceted search with JSON attributes, which discusses how to organize your data for this type of filtered search. 

If you want to build robust search, Algolia can support you. Search suggestions and facets are built-in to our API-driven platform.

 

Related Links –

  1. See all possible “types” of Autocomplete experiences.
  2. A comprehensive “Get started” guide for Autocomplete.
  3. A guide explaining how to integrate Autocomplete with Instantsearch JS.
About the author
Adam DuVander

Principal Consultant at EveryDeveloper

linkedintwitter

Recommended Articles

Powered byAlgolia Algolia Recommend

Building a composable front-end search with autocomplete and instant search results
product

John Stewart

VP Corporate Marketing

Replicating the Algolia documentation search with Autocomplete
ux

Sarah Dayan
François Chalifour

Sarah Dayan &

François Chalifour

How does autocomplete maximize the power of search?
ux

Catherine Dee

Search and Discovery writer