### Layout

- Use a visual separator to group similar or related autocomplete suggestions.
- If possible, provide a preview for autocomplete suggestions to help people quickly determine if the suggested result is helpful. For example, an image preview or file title.
- Don't build a custom search control based on the default text box or any other control.
- Use a search box without a parent container when it's not restricted to a certain width to accommodate other content. This search box will span the entire width of the space it's in.

### Content

- Use placeholder text in the search box to describe what people can search for. For example, "Search", "Search files", or "Search site".
- After people select the search box, but before they've entered text, use hint text to communicate search scope. For example, "Try searching for a PDF", "Search contacts list", or "Type to find \<content type\>".
- Provide autocomplete suggestions to help people search quickly. These suggestions can be from past searches or autocompletions of a person's text input.
- Provide autocomplete suggestions where there are strong matches to a person's search that they may want to see immediately.
- Although search entry points tend to be similarly visualized, they can provide access to results that range from broad to narrow. By effectively communicating the scope of a search, you can ensure that people's expectations are met by the capabilities of the search you're performing, which will reduce the possibility of frustration. The search entry point should be juxtaposed with the content being searched.<br/><br/>Some common search scopes include:
  - **Global**: Search across multiple sources of cloud and local content. Varied results include URLs, documents, media, actions, apps, and more.
  - **Web**: Search a web index. Results include pages, entities, and answers.
  - **My stuff**: Search across devices, cloud, social graphs, and more. Results are varied but are constrained by the connection to user accounts.
