Search suggestions UI

[simplesquare1]

0. User types first letter of the keyword and dropdown will appear with:
   • three suggested words .These will be based on all previous searches for now (in future we will do something smarter :)
   • three words of the disease names

2.0 When user hover over any of these keywords the background will change colour (use the colour from other hover effects we have on platform) 2.1 When user press ⬇️ key the background of the selected keyword will change colour.

3. When user clicks on the suggested word from the dropdown (first three words) then the keyword will appear in the search box and the search is performed.

4. When user clicks on the disease keyword the predicate will appear. (e.g disease: Alzheimer's disease) and the search is performed.

@RafLeszczynski we are starting super lean to test the interactions as we go. Please implement this on current input field. Ignore the highlight state (green border) and the 🔎 search button. We need to get the behaviour right at this stage then we will do the visuals.

@cwhicher @tombyers I think this is standard behaviour and we can be confident to pass this to dev. There are some unclarity about the navigation in the search box and predicates designs which we will keep iterating on.

[SebastianPlace]

Requirements:

• When search string >= 1
  • Show 3 suggested phrases (Huginn)
  • Show 3 diseases (Muninn)
  • Embolden the letters of the suggestions which match the search term (NOT IMPORTANT AT THIS STAGE)
• Hover effects on suggestions (NOT IMPORTANT AT THIS STAGE)
• Allow keyboard navigation on dropdown (NOT IMPORTANT AT THIS STAGE)
• On suggestion click
  • Search for this term / predicate
  • If predicate -> Add styling (NOT IMPORTANT AT THIS STAGE)