Implement Autocomplete Widget

You are required to Implement an Autocomplete component.

The autocomplete is a normal text input enhanced by a panel of suggested options.

This is initial HTML structure:

<div class="autocomplete">
  <input id="search" type="search" autocomplete="off" />
  <ul></ul>
</div>

Requirements:

  • Show suggestions when the user starts writing
  • By clicking on an option put it into the input
  • By clicking on the outside of the suggestions box, hide it