Typeahead coding exercise

Create a typeahead search field that provides suggestions based on what the user types. We’ve included the base design but feel free to add anything that will improve the user experience.

Initital state

With suggestions

Design

It's not important to match the exact style of the demo, but here are some properties to help you get started:

• Input border: #AAAAAA
• Button background: #4E8FDF
• Button text color: #B7D0F1

Data set

Data set to query in the implementation.

[
  "Alexa",
  "Amber",
  "Benjamin",
  "Beyoncé",
  "Cameron",
  "Dennis",
  "Emily",
  "François",
  "Gonzalo",
  "Henry",
  "Icarus",
  "Jean-Fredirec",
  "Jessica",
  "John-Jefferson",
  "Kenneth",
  "Katie",
  "Laura",
  "Mateo",
  "Maximina",
  "Madison",
  "Nicholas",
  "Olivero",
  "Pamela",
  "Pablo",
  "Quinten",
  "Rodrigo",
  "Stella",
  "Tomas",
  "Usher",
  "Veronica",
  "Washington",
  "Xochitl",
  "Yvonne",
  "Zenon"
]
        

Development environment

You are welcome to use the third-party view framework of your choice, or no framework at all. Examples of view frameworks: Ember, Vue.js, React, Angular.

Please make your code shareable by:

• Pushing your code to a public GitHub repository
• Putting your code on an online code editor that can be publicly shared (Glitch, Codepen.io, etc)

Please note, you cannot use third-party libraries that bring in complete components with full interactions (JS), CSS and markup. Examples: Bootstrap, Material design. Reason: The purpose of the exercise is to see how you would build this component from scratch. We’ll want to have many opportunities to discuss the choices you make relating to mark-up, styling, and interactions.

Preparing for your interview

Be prepared to:

• share the publicly accessible link to your code
• talking points on your code, why you chose the approach and framework you used, the bits you're proud of, and any challenges