Homepage Instant Search

⚡ ElasticsearchBook.com is crafted by Jozef Sorocin and powered by:

Spatialized.io (Elasticsearch & Google Maps consulting)
in cooperation with Garages-Near-Me.com (Effortless long-term parking across Germany)

Terminology

First off, let's clear up some commonly misused terms:

Autofill pre-fills form input fields such as addresses and credit card details
Autocomplete suggests complete words or strings without the user needing to type them in full (think typing a few characters into the Wikipedia search input field and then clicking the ↓ and tab keys)
Instant search quickly reacts to user queries and suggests matching entries in a dropdown. There’s a very fine line between an instant search and an autocomplete.

Given current trends, offering a fast and relevant instant search experience to your users is not only advisable — it's a must. With that being said, let's break down what's happening on the MIT homepage, extract some lessons from it, and replicate something similar with Elasticsearch.

Use Case

I'd like to implement an instant, multi-category homepage search just like MIT:

web.mit.edu captured on Jan 30, 2021

such that as I start typing the word department, only relevant suggestions are presented.

Observations

I chose MIT's homepage because it already uses Elasticsearch. As a matter of fact, many sites do but this one is particularly easily explorable due to the nature of the unmasked HTTP calls involved.

Let's inspect what's happening under the hood using Chrome Dev Tools:

https://storage.googleapis.com/es-handbook-resources/mit-autocomplete-network.mp4

Observation #1: No typeahead debouncing

If you look closely, each time the user types a new character, a new XHR network request is performed. This happens for the tokens de, dep, depa, depar, etc. This gives the impression that the search is super-reactive but in turn costs network bandwidth and ES processing resources.

What's worse, the "outdated" requests are not cancelled. This means that the by-now-irrelevant search results for the token dep will have been superseded by the results for depa but the dep request will have finished nonetheless.