Content Comparison

Initial state

Hint text in grey

Hover over the search field

Boarder colour changes

Click on the text field

• Search in focus

• Hint text presented

• Text mark is flickering

• Suggestions: recent and/or popular queries are presented (optional)

Enter first letter

• Hint text hidden

• Suggestions are hidden

• The list is filtered

• Searched query is highlighted within the list

• Clear all ("x") is presented

Enter next letter/s

The list is filtered to show relevant results

Click on item in the list

Focus is moved away from the search field

Clear all

Click on the “x”: (1) clears all characters (2) focus on the text field.

The "x" disappears when the text is cleared (both manually or using the "x" button)