🛠️ Typeahead: Handling errors

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

🛠️ Typeahead: Handling errors

Typeaheads are generally used in two ways:

  1. Choosing predictions is optional
  2. Choosing predictions is compulsory

You don’t need to handle errors if predictions are optional, but you have to handle errors if predictions are compulsory.

When predictions are optional

You want consider what happens if the GET request fails.

If predictions are optional, users can type what they want into the input field manually. It’s not a big deal if predictions don’t show up.

For example, try going offline before typing into the search form on Google. Google doesn’t show any predictions.

Google doesn't show Typeahead

When prediction are compulsory

Airline websites are great examples where this happen.

There’s a code for each airport. Like SIN or WSSS for Singapore’s airport. Airlines websites probably need one of these airport codes in the backend. (I’m not sure which one though).

Shows IATA and ICAO airport codes for a few cities

Airlines need to gather the correct airport code from what users select, so they need users to select a prediction.

Here’s an example: I typed the correct countries into the “From” and “To” fields. But the website showed me an error. This happened even though there’s only one prediction!

Error in Singapore Airline's form.

There are two ways you can handle these types of errors:

  1. Check the input in the backend (assuming you have a backend) and refresh the page with an error.
  2. Check the input and create an error message. (This uses Ajax).

Either way works.

Error handling for the Typeahead

Predictions are optional for our Typeahead, so we won’t need to show any errors.