Task: Typeahead (Frontend)

Tags

JavaScript, TypeScript, Frontend

Description

Typeahead or autocomplete is a common feature that people come across on websites regularly. For example, when you are searching on Google, you will notice a word populates even before you finish typing.

For this task, we'll implement the frontend of a simple typeahead system to query names and corresponding popularities. You will have a backend endpoint that's ready to use. Your final work will look something like the following GIF. More details would be specified in the following section.

Typeahead Frontend GIF

Specification

This task has a node and react template. You're free to fill in the template with your code. Your goal is to implement the following functionalities.

You can run npm start or yarn start to start the react project. You are free to add modules to package.json. But please don't remove existing modules from there.

Input.tsx / onChange

Once the input is changed, it should fetch the server with suggestions. It would be an http get with this format ${this.REMOTE_ENDPOINT}/${prefix}. Use AbortController to cancel previous requests when the user typing too fast.

Input.tsx / onfocus

Once the input is changed, it should fetch the server with suggestions. It would be a http get with this format ${this.REMOTE_ENDPOINT}/

Input.tsx / onClick

Implement the according logics when a result is picked in the dropdown.

Input.tsx / onKeyDown

Implement key up and down to highlight the item. If already on the first item, key up would go to the last item. If already on the last item, key down would go to the first item.

Input.tsx / onHover

Implement when an item is being hovered. Being hovered should highlight the item.

Example

As shown in the above GIF.

Instructions
Get started
My Submissions

Submit to see your result!

Leaderboard

Nobody here yet, solve it now to get on the board!