Adding search to an app (HTML)

Use the SearchBox control and the Search contract to let users search your app.

The search box provides the UI for performing searches and showing suggestions. The search box supports app-supplied search suggestions and results, app-specific search history, and full support for touch, keyboard, and mouse interactions.

The search box layout looks like this.

The in-app search box control for Windows Store apps

Here are example search results displayed in the search box control.

Example search box results for MSFT.

Search results will be displayed by your app. You must design and create a view for your app that displays the user's search results in a way that is coherent and relevant to the user's needs and that aligns with the purpose of your app.

See Guidelines and checklist for search to learn about creating a good search experience for your users.

To learn how to use the search box, check out the SearchBox control sample.

The Search contract

Use the Search contract to respond to Search activations.

Search in Windows 8 apps

Prior to Windows 8.1, apps used the Search charm to provide in-app search. Developers implemented the Search contract and used the SearchPane API to handle queries and obtain suggestions and results.

Although we continue to fully support the Windows 8 Search contract, as of Windows 8.1, we recommend using the Search charm for global searches. In-app search should use the SearchBox control instead of the SearchPane. You still use the Search contract to handle Search activation.

In this section

Topic Description

Quickstart

 

Additionally, you can try working with the Search charm and other key Windows 8 features by downloading the hands-on labs for Windows 8. These labs provide a modular, step-by-step introduction to creating a sample Windows Store app in the programming language of your choice (JavaScript and HTML or C# and XAML).

WinJS.UI.SearchBox

Guidelines and checklist for search

SearchBox control sample