Content Comparison

...

Example of a hierarchical view in the results list:

Image Modified

Where needed (and possible), consider presenting the number of results in a prominent area, particularly for larger or more complex results lists.

...

Less than 0.1 seconds: no loader is needed.
0.1 - 5 seconds: use a circular Progress Indicator with the text Searching <Categories>...
More than 5 seconds: this loading time is too long for Live Search → use Search with Auto-Suggest instead.
(Optional) Delay trigger of initial search until at least 3 characters have been entered to improve performance.

...

Interaction

Step	Visual Example	Description
Initial state	Image Modified	Guiding / hint text in grey.
Click on the Text Field	Image Modified	Search is in focus. The guiding / hint text is hidden. The text cursor is blinking. (Optional) It is recommended that a suggestions list with recent and/or popular queries are used. See Search for more information.
Enter first letter	Image Modified	Suggestions are hidden (where used). The list is filtered. The searched string is highlighted in bold within the list of results. A Clear All icon button (X) appears.
Enter next letters	Image Modified	The list is filtered to show relevant results.
Clear all (either manually or clicking the X button)	Image Modified	Characters are cleared. The focus is set on the text field. The X button disappears.

There are no validations on the search string.

...