Migrating from Windows 8.0 SearchPane to Windows 8.1 SearchBox

Windows 8.1 brings improvements to Windows 8 in many areas and search experience in apps is one of these areas. In Windows 8.0, the default search experience was to go to the search charm, which offered to search within the app by default (if supported) with a control called SearchPane.

In Windows 8.1, search charm can also search inside the app, but the default behavior is to search in “Everywhere”. To search within an app, you need to switch to the app specifically. Now, search experience is controlled by the apps, which introduces the SearchBox control that makes it easy to add the search box capability.

Since the default search charm behavior is not within the app, you should transition from using SearchPane to SearchBox for an easier, convenient and consistent search experience.

In this post, I will show you how you can transition from Windows 8.0 SearchPane to 8.1 SearchBox control in JavaScript, and it is very similar in C#.

In 8.0, to implement search you need to use something like:

Windows.ApplicationModel.Search.SearchPane.getForCurrentView().onquerysubmitted = function (eventObject) { var queryText = eventObject.queryText; // do something with queryText };

If you want to have suggestions (optional):

Windows.ApplicationModel.Search.SearchPane.getForCurrentView().onsuggestionsrequested = function (eventObject) { var queryText = eventObject.queryText, suggestionRequest = eventObject.request; var query = queryText.toLowerCase(); for (var i = 0, len = suggestionList.length; i < len; i++) { if (suggestionList[i].substr(0, query.length).toLowerCase() = query) { suggestionRequest.searchSuggestionCollection.appendQuerySuggestion(suggestionList[i]); } } } };

In 8.1, first you need to add the SearchBox to your HTML:

In your JS file, get the searchBoxId element, and subscribe to the suggestions (optional) and submit event handlers.

var searchBox = document.getElementById("searchBoxId"); searchBox.addEventListener("suggestionsrequested", suggestionsRequestedHandler); searchBox.addEventListener("querysubmitted", querySubmittedHandler);

If you want to type in and have it automatically register in the search box, set focusOnKeyboardInput to true.

searchBox.winControl.focusOnKeyboardInput = true;

This is the suggestions event handler:

This is the submit event handler. Note that the eventObject.queryText is now called eventObject.detail.queryText.

function querySubmittedHandler(eventObject) { var queryText = eventObject.detail.queryText; //do something with queryText }

If you want to have an appbar item to focus on the search box:

document.getElementById("cmdAdd").addEventListener("click", doClickAdd, false); function doClickAdd() { var searchBox = document.getElementById("searchBoxId"); // this used to be the searchPane searchBox.focus(); // and after defining searchPane, you needed to do searchPane.show() }

Finally, here is Breezy with Windows 8.1 SearchBox:

Also, check out the Search changes UX documentation and SearchBox sample.
If you have any questions, comments or want to add anything, please leave a message below.

Sertaç Özercan