Build an Autocomplete using React.js | Type One | Frontend Coding Challenge | JavaScript Interview Question
@Yomesh Gupta

ReactIntermediate
1437
Do you see value in our efforts?

Devtools Tech is a free platform for Frontend Engineers. It takes a lot of time, effort, and finanical resources to keep the platform running. If you see any value in our work and would like to support us then you can do using the following options.

InternationalDomestic

In this coding challenge, you need to build an autocomplete that will act as a payment page where users can enter their UPI. The autocomplete form should suggest possible UPI handles based on the user input.

Functional Spec:

  1. Based on the user input, you need to show the best-matched list of UPI handles.
  2. There should be an inline suggestion of the best matched UPI handle.
  3. The user should be able to select from the list by clicking on a list item or using the keyboard.
  4. If a best-matched suggestion is visible inline and the user clicks on the right arrow, the suggestion should be auto-filled.
  5. You need to handle different edge cases.
  6. Feel free to add any other functionality you think would be useful for the end user.

Demo 1:

Demo 2:

Image Graphic used in the demo:

https://uploads.codesandbox.io/uploads/user/db72b415-e33f-48d9-ba47-160088dc6c79/78ab-payment-graphic.png