Life-Cycle Events - Metro Revealed: Building Windows 8 Apps with HTML5 and JavaScript - page 83

expresses some key aspects of the Metro user experience. I am going to implement the search
contract, which tells Windows that my example application is capable of supporting the oper-
ating-system wide search mechanism. In the sections that follow, I'll show you how to declare
support for the contract and implement the contract terms.
Declaring Support for the Contract
The first step toward implementing a contract is to update the manifest. Open the package.
appxmanifest file, and switch to the Declarations tab. If you open the Available Declarations
menu, you will see the lists of contracts that you can declare support for. Select Search and click
the Add button. The Search contract will appear on the Supported Declarations list. Ignore the
properties for the contract; they don't do anything for JavaScript Metro apps.
Handling the Search
The purpose of the search contract is to connect the operating system search system with some
kind of search capability within your application. For my example app, I am going to handle
search requests by iterating through the items on the grocery list and finding the first one that
contains the string the user is looking for. This won't be the most sophisticated search imple-
mentation, but it will let me focus on the contract without getting bogged down in creating lots
of new code to handle searches. I have added a new JavaScript file to the project called search.
js , the contents of which you can see in Listing 5-5.
Listing 5-5. Implementing a Basic Search Feature
/// <reference path="//Microsoft.WinJS.0.6/js/base.js" />
/// <reference path="//Microsoft.WinJS.0.6/js/ui.js" />
(function () {
"use strict";
WinJS.Namespace.define("Search", {
searchAndSelect: function (searchTerm) {
var searchTerm = searchTerm.toLowerCase();
var items = ViewModel.UserData.getItems();
var matchedIndex = -1;
for (var i = 0 ; i < items.length; i++) {
if (items.getAt(i).item.toLowerCase().indexOf(searchTerm) > -1) {
matchedIndex = i;
break;
}
}
ViewModel.State.selectedItemIndex = matchedIndex;
}
});
})();
In this file, I have defined a namespace called Search that contains the searchAndSelect
function. This function accepts the term that the user is searching for and performs a basic