검색 결과 항목 템플릿 추가

아티클
04/17/2014

이 항목에서는 Visual Studio에 포함된 검색 결과 항목 템플릿을 사용하여 사용자가 앱 내에서 정보를 검색하도록 허용하는 방법을 보여 줍니다. 검색용 항목 템플릿을 통해 앱은 WinJS.UI.SearchBox 컨트롤에서 시작한 검색의 검색 결과 페이지를 제공할 수 있습니다. 항목 템플릿에 대한 자세한 내용은 JavaScript 항목 템플릿을 참조하세요. 대부분의 앱에서 Microsoft Visual Studio 2013에 포함된 항목 템플릿을 사용하여 앱 개발을 간소화할 수 있습니다.

검색 결과 템플릿은 Windows 스토어 앱에 대한 권장 탐색 모델을 구현하는 페이지 컨트롤입니다. 허브, 그리드, 분할 및 탐색 프로젝트 템플릿은 이 탐색 모델을 구현합니다. 자세한 내용은 탐색 모델을 참조하세요.

중요 탐색 또는 빈 프로젝트 템플릿에서 검색 결과 항목 템플릿을 사용하려면 프로젝트 파일을 추가해야 합니다. 다음 목록을 참조하세요.

자세한 내용과 다른 검색 구현 방법은 빠른 시작: 검색 추가를 참조하세요.

이 항목의 절차에서는 허브, 그리드 및 분할 템플릿에 검색 결과 항목 템플릿을 추가하는 방법을 보여 줍니다. 다른 프로젝트 템플릿에 항목 템플릿을 추가하려면 다음에 유의하세요.

빈 템플릿의 경우 프로젝트에 navigator.js 파일을 추가합니다. 그리드 템플릿 같은 다른 프로젝트 템플릿에서 이 파일을 찾을 수 있습니다. default.html에서도 콘텐츠를 호스트하는 코드를 추가해야 합니다. 자세한 내용은 탐색 모델을 참조하세요.
탐색 및 빈 템플릿의 경우 프로젝트에 data.js(그리드 템플릿 같은 다른 프로젝트 템플릿에서 찾을 수 있음)를 추가하거나 데이터에 액세스하기 위한 고유한 메서드를 구현합니다.
탐색 및 빈 템플릿의 경우 템플릿에 대한 홈페이지에 검색 컨트롤과 이벤트 처리기를 추가합니다. 탐색 템플릿의 경우 홈페이지는 home.html입니다. 빈 템플릿의 경우 고유한 홈페이지를 만들거나 default.html을 사용해야 합니다.

검색 결과 항목 템플릿 추가

다음 절차에서는 프로젝트 템플릿에 검색 결과 항목 템플릿을 추가하는 방법을 보여 줍니다.

Hh923025.wedge(ko-kr,WIN.10).gif 검색 결과 항목 템플릿을 추가하려면

Visual Studio에서 새 프로젝트를 만듭니다. 이 예제에서는 허브, 그리드 또는 분할 템플릿을 사용합니다.
솔루션 탐색기의 pages 프로젝트 폴더에서 search라는 새 폴더를 추가합니다.
search 폴더에 대한 바로 가기 메뉴를 열고 추가 > 새 항목을 선택합니다.
새 항목 추가 대화 상자의 가운데 창에서 검색 결과 페이지를 선택합니다. 이 예제에서는 이름 상자에 표시되는 기본 이름인 searchResults.html을 그대로 유지합니다.
추가를 선택합니다.

새 search 폴더의 프로젝트에 searchResults.html, searchResults.css 및 searchResults.js가 추가됩니다.
searchResults.js를 열고 검색 페이지의 URI가 올바른지 검증합니다.
```
var searchPageURI = "/pages/search/searchResults.html";
```
검색 파일을 search 폴더에 저장하지 않을 경우 URI를 업데이트해야 합니다.
searchResults.html을 열고 searchResults.css에 대한 참조가 올바른지 검증합니다.
```
<link href="/pages/search/searchResults.css" rel="stylesheet" />
```

검색 컨트롤 추가(허브 템플릿)

WinJS.UI.SearchBox 컨트롤을 사용하여 사용자가 앱에서 데이터를 검색하도록 합니다. 이러한 단계는 프로젝트 템플릿별로 다릅니다. 이러한 지침은 허브 템플릿에 적용됩니다. 그리드 또는 분할 템플릿을 사용하려면 다음 검색 컨트롤 추가(그리드 또는 분할 템플릿) 섹션을 참조하세요 .

Hh923025.wedge(ko-kr,WIN.10).gif 페이지에 검색 컨트롤을 추가하려면

앱의 홈페이지(hub.html)에서 첫 번째 HubSection 컨트롤의 DIV 요소에 SearchBox 컨트롤을 추가합니다.

<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(ko-kr,WIN.10).gif 페이지에 검색 컨트롤을 추가하려면

앱의 홈페이지(그리드의 groupedItems.html 및 분할의 items.html)에서 SearchBox 컨트롤을 추가합니다.

페이지 조각(클래스 이름이 fragment groupeditemspage 또는 fragment itemspage임)에 대한 DIV 요소 내에서 ListView 컨트롤에 대한 SECTION 요소 뒤에 컨트롤을 배치합니다. 여기에 표시된 코드는 그리드 템플릿에 대한 것입니다.

<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 코드의 경우 .groupeditemspage 대신에 .itemspage 규칙을 사용합니다.
```
.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(ko-kr,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에서 앱을 실행할 때 검색 결과를 쉽게 확인할 수 있도록 일부 값을 수정합니다. 이 예제에서는 샘플 데이터의 몇몇 제목 및 부제목(sampleItems 변수)을 다음과 같이 "Hello" 및 "hloTitle"로 바꿉니다.

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(ko-kr,WIN.10).gif 검색을 테스트하려면

디버거 도구 모음의 디버깅 시작 단추 옆에 있는 드롭다운 목록에서 로컬 컴퓨터를 선택합니다.
F5 키를 선택하여 디버깅을 시작합니다.
왼쪽 허브 섹션에 나타나는 검색 상자에 Hello를 입력하고 Enter 키를 누릅니다.

검색 결과 페이지에는 검색 용어가 포함된 데이터 모델의 결과가 표시됩니다. 다음 그림은 검색 상자에 "Hello"를 입력한 경우의 검색 결과 페이지를 보여 줍니다.
검색 결과 중 하나를 클릭합니다.
허브, 그리드 또는 분할 앱은 선택한 제목이 맨 위에 표시된 항목 페이지를 엽니다.

뒤로 단추를 사용하여 검색 결과 페이지로 돌아갈 수 있습니다.

다음을 통해 공유

검색 결과 항목 템플릿 추가

검색 결과 항목 템플릿 추가

검색 컨트롤 추가(허브 템플릿)

검색 컨트롤 추가(그리드 또는 분할 템플릿)

검색에서 반환된 항목에 대한 탐색 제공

검색 테스트

관련 항목

추가 리소스