新增搜尋結果項目範本

發行項
05/31/2014

這個主題示範如何讓使用者在您的應用程式內使用 Visual Studio 隨附的搜尋結果項目範本搜尋資訊。搜尋的項目範本可讓應用程式針對從 WinJS.UI.SearchBox 控制項起始的搜尋提供搜尋結果頁面。如需項目範本的描述，請參閱 JavaScript 項目範本。對於大部分的應用程式，您可以使用 Microsoft Visual Studio 2013 隨附的項目範本來簡化應用程式開發。

「搜尋結果」範本是頁面控制項，它會為 Windows 市集應用程式實作建議的瀏覽模型。「中樞」、「格線」、「分割」和「瀏覽」專案範本會實作這個瀏覽模型。如需詳細資訊，請參閱瀏覽模型。

重要若要使用「搜尋結果」項目範本搭配「瀏覽」或「空白」專案範本，您就必須新增其他專案檔案。請參閱下列的清單。

如需詳細資訊以及實作搜尋的其他方式，請參閱快速入門：新增搜尋。

本主題中的程序會示範如何將「搜尋結果」項目範本新增到「中樞」、「格線」及「分割」範本中。若要新增項目範本到不同的專案範本，請注意下列事項：

如果是「空白」範本，請將 navigator.js 檔案新增到專案 (您可以在其他專案範本 (如「格線」範本) 中找到這個檔案)。您必須也在 default.html 中新增程式碼以裝載內容。如需詳細資訊，請參閱瀏覽模型。
如果是「瀏覽」和「空白」範本，請將 data.js 新增到專案 (您可以在其他專案範本 (如「格線」範本) 中找到該檔案)，或實作自己的方法來存取資料。
如果是「瀏覽」和「空白」範本，請在範本的首頁中新增搜尋控制項及其事件處理常式。「瀏覽」範本的首頁是 home.html。如果是「空白」範本，您必須建立自己的首頁或使用 default.html。

新增搜尋結果項目範本

下列程序會示範如何將「搜尋結果」項目範本新增至專案範本。

Hh923025.wedge(zh-tw,WIN.10).gif 新增搜尋結果項目範本

在 Visual Studio 中建立新專案。針對此範例使用「中樞」、「格線」或「分割」範本。
在 [方案總管] 的 [頁面]**** 專案資料夾中，新增名為搜尋的新資料夾。
開啟 [搜尋] 資料夾的捷徑功能表，然後選擇 [新增]**** > [新增項目]。
在 [加入新項目]**** 對話方塊的中央窗格，選擇 [搜尋結果頁面]。針對這個範例，保留 [名稱]**** 方塊中顯示的預設名稱 searchResults.html。
選擇 [新增]。

Visual Studio 會將 searchResults.html、searchResults.css 以及 searchResults.js 新增到新 [搜尋]**** 資料夾中的專案。
開啟 searchResults.js，確認搜尋網頁的 URI 正確，
```
var searchPageURI = "/pages/search/searchResults.html";
```
如果您沒有在 [搜尋] 資料夾中放置搜尋檔案，則必須更新 URI。
開啟 searchResults.html，確認 searchResults.css 的參考正確。
```
<link href="/pages/search/searchResults.css" rel="stylesheet" />
```

新增搜尋控制項 (中樞範本)

使用 WinJS.UI.SearchBox 控制項可讓使用者搜尋您的應用程式資料。每個專案範本的這些步驟各有不同。這些指示適用於「中樞」範本。若要使用「格線」或「分割」範本，請參閱下一節新增搜尋控制項 (格線或分割範本)。

Hh923025.wedge(zh-tw,WIN.10).gif 新增搜尋控制項至頁面

在應用程式的首頁 (hub.html)，新增 SearchBox 控制項到第一個 HubSection 控制項的 DIV 元素。

<div class="hero" data-win-control="WinJS.UI.HubSection">
    <div class="searchBox" data-win-control="WinJS.UI.SearchBox">
    </div>
</div>

在首頁的 CSS 檔案 (hub.css)，指定 SearchBox 控制項的顯示屬性。您可以在第一個中樞區段的規則之後包含下列 CSS 程式碼。
```
.hubpage .hub .hero .win-hub-section-header {
    display: none;
}

.hubpage .hub .hero .searchBox {
    margin-left: 400px;
    margin-top: 200px;
}
```
在首頁的 JavaScript 檔案 (hub.js)，建立 onquerysubmitted 事件的事件接聽程式。處理常式會從 SearchBox 控制項擷取查詢。

在 ready 函式中 (於程式碼註解指示您必須新增初始化程式碼的位置) 建立接聽程式。
```
// TODO: Initialize the hub sections here.
var elem = document.querySelector(".searchBox");
elem.addEventListener("querysubmitted", this.searchHandler.bind(this));
```
在 hub.js 中，新增瀏覽到搜尋結果頁面的事件處理常式。在與 ready 函式相同的範圍中新增事件處理常式。

重要如果這是您為頁面定義的最後一個函式，請移除下方程式碼中的逗號。
```
searchHandler: function (args) {
    WinJS.Navigation.navigate('/pages/search/searchResults.html', args.detail);
},
```
提示在前述的程式碼中，事件引數的 detail 屬性包含了查詢的資訊 (如查詢文字)。
若要繼續使用「中樞」範本，請略過下一節並參閱提供瀏覽到搜尋傳回的項目。

新增搜尋控制項 (格線與分割範本)

使用 WinJS.UI.SearchBox 控制項可讓使用者搜尋您的應用程式資料。每個專案範本的這些步驟各有不同。這些指示適用於「格線」與「分割」範本。

Hh923025.wedge(zh-tw,WIN.10).gif 新增搜尋控制項至頁面

在應用程式首頁 (「格線」的 groupedItems.html 與「分割」的 items.html) 新增 SearchBox 控制項。

將控制項放置在 ListView 控制項的 SECTION 元素之後、頁面片段的 DIV 元素之內 (類別名稱為 fragment groupeditemspage 或 fragment itemspage)。這裡顯示的程式碼是針對「格線」範本。

<section aria-label="Main content" role="main">
    <div class="groupeditemslist win-selectionstylefilled" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{
            layout: {type: WinJS.UI.GridLayout, groupHeaderPosition: 'top'},
            selectionMode: 'none',
            currentItem: {type: WinJS.UI.ObjectType.item, index: 0, hasFocus: true},
            groupDataSource: Data.groups.dataSource,
            groupHeaderTemplate: select('.headertemplate'),
            itemDataSource: Data.items.dataSource,
            itemTemplate: select('.itemtemplate'),
            ongroupheaderinvoked: select('.pagecontrol').winControl.groupHeaderInvoked,
            oniteminvoked: select('.pagecontrol').winControl.itemInvoked
        }">
    </div>
<div class="searchBox" data-win-control="WinJS.UI.SearchBox" >
</div>

在首頁的 CSS 檔案 (groupedItems.css 或 items.css)，指定 SearchBox 控制項的顯示屬性。將下列 CSS 新增至 CSS 檔案的開頭 (在測試之後，調整 margin-left 值，讓搜尋控制項顯示在應用程式標題的右邊)。

提示對於「分割」範本 CSS 程式碼，請改用 .itemspage 規則來取代 .groupeditemspage。
```
.groupeditemspage .searchBox {
    margin-left: 600px;
    margin-top: 70px;
}
```
在首頁的 JavaScript 檔案 (groupedItems.js 或 items.js)，建立 onquerysubmitted 事件的事件接聽程式。處理常式會從 SearchBox 控制項擷取查詢。

在 ready 函式中建立事件接聽程式。
```
var elem = document.querySelector(".searchBox");
elem.addEventListener("querysubmitted", this._searchHandler.bind(this));
```
在 groupedItems.js 或 items.js 中，新增瀏覽到搜尋結果頁面的事件處理常式。在與 ready 函式相同的範圍中新增事件處理常式：

重要如果這是您為頁面定義的最後一個函式，請移除下方程式碼中的逗號。
```
_searchHandler: function (args) {
    WinJS.Navigation.navigate('/pages/search/searchResults.html', args.detail);
},
```
在前述的程式碼中，事件引數的 detail 屬性包含了查詢的資訊 (如查詢文字)。

提供瀏覽到搜尋傳回的項目

在本節中，我們要修改「搜尋結果」項目範本以支援瀏覽。「搜尋結果」項目範本程式碼會自行處理搜尋。您可以修改其預設行為。例如，您可能想要修改 _searchData 函式以比對不同類型的應用程式資料。根據預設，範本會將資料模型中的標題與副標題與查詢字串進行比較。在這個範例中，我們不會修改搜尋條件。

注意 _searchData 函式會尋找 data.js 提供的資料。如果您使用「瀏覽」或「空白」範本，必須將 data.js 新增到專案或提供搜尋您自己資料的方法，然後自訂 _searchData 函式。如需 data.js 中資料模型的詳細資訊，請參閱新增資料至專案範本。

在這個範例中，我們實作的程式碼可瀏覽搜尋查詢所傳回的項目，以及搜尋結果頁顯示的項目。

Hh923025.wedge(zh-tw,WIN.10).gif 新增項目瀏覽

開啟 searchResults.js，然後將程式碼新增至 _itemInvoked 函式以瀏覽到正確頁面。這個程式碼支援從搜尋結果頁面瀏覽到與搜尋結果關聯的項目頁面

注意這裡顯示的 URI 是針對「中樞」範本。對於「格線」範本，URI 必須是：/pages/itemDetail/itemDetail.html。對於「分割」範本，URL 必須是：/pages/items/items.html。
```
_itemInvoked: function (args) {
    args.detail.itemPromise.done(function itemInvoked(item) {
        // TODO: Navigate to the item that was invoked.
        var itemData = [item.groupKey, item.data.title];
        WinJS.Navigation.navigate("/pages/item/item.html", { item: itemData });
    });
},
```

在 data.js 中，修改一些值，以便在執行應用程式時讓搜尋結果易於確認。在這個範例中，以 "Hello" 和 "hloTitle" 取代範例資料中一些標題和副標題 (sampleItems 變數)，如下所示：

var sampleItems = [
    // . . .
    { group: sampleGroups[0], title: "Hello", subtitle: "Item Subtitle: 5", description:
        itemDescription, content: itemContent, backgroundImage: mediumGray },

    { group: sampleGroups[1], title: "hloTitle", subtitle: "Hello", description:
        itemDescription, content: itemContent, backgroundImage: darkGray },
    { group: sampleGroups[1], title: "Hello", subtitle: "Item Subtitle: 2", description:
        itemDescription, content: itemContent, backgroundImage: mediumGray },
    // . . .
];

測試搜尋

Hh923025.wedge(zh-tw,WIN.10).gif 測試搜尋

從偵錯工具工具列上的 [開始偵錯] 按鈕旁邊的下拉式清單中，選擇 [本機電腦]****。
選擇 F5 以開始偵錯。
在顯示於左邊中樞區段的搜尋方塊中，指定 Hello，然後按 Enter。

搜尋結果頁面會顯示包含搜尋字詞之資料模型中的結果。下圖顯示您在搜尋方塊中輸入 "Hello" 時的搜尋結果頁。
按一下其中一個搜尋結果。
「中樞」、「格線」或「分割」應用程式會開啟項目頁面，頂端顯示所選標題。

您可以使用 [上一步] 按鈕返回搜尋結果頁面。

新增搜尋結果項目範本

新增搜尋結果項目範本

新增搜尋控制項 (中樞範本)

新增搜尋控制項 (格線與分割範本)

提供瀏覽到搜尋傳回的項目

測試搜尋

相關主題

其他資源