Add logic on the frontend to show dropdown options for global search bar

[raverdls]

Context
We want to implement autocomplete options for the global searchbar on the homepage, similar to how it is done on Merriam-Webster's site (See image below).

Flow

• Once a user starts typing, frontend will make requests to the backend for the partial words eg "bra".
• The backend is expected to return a list of like-word objects.
• Frontend will display the word from each object in a dropdown below the input field, so that the user may select an option to search.
• User should see a light yellow highlight over each word when the user hovers over it.
• If the user clicks on an autocomplete suggestion, they should be routed to a new web page with the word details for that word. (There is no design requirement for this page, it is purely for demo purpose).

Task Detail

• Implement a component and style for each line of the autocomplete list.
• Implement the mechanism and style for the autocomplete list to display the results of the api request
• Implement an API request from the frontend, to fetch the likewords from the backend.

• Lean on your mentor for guidance on how often to send off the request, styling feedback and any issues with sending the request

Acceptance Criteria

• User is able to type into the search box and see a list of autocomplete options
• User sees autocomplete option highlighted when they hover.
• User is taken to a new page with the word details for the selected "autocomplete option" when they select it