Design and Development of Windows 8 Metro-search and sharing (2)

Add recipe search

In practice2, WeContoso cookbookAdded search support so that users can useSearchSearch recipe data with the superbutton. For example, if you want to find all recipes containing sugar, you can callSearchSuper button, enter"SugarThen a list of sugary recipes is displayed.

Task1-CallSearchSuper button

InContoso cookbookBefore adding search support, let's take a lookContoso cookbookCall search when the browser is in the frontendUI.

1.PressF5Start the applicationProgram.

2.If you are using a touch screen device, gently scan the left edge of the screen from right to left, or pressWin-CKey to display the super button toolbar.

3.ClickSearchSuper button, displayMetroSearch pane.

4.Enter"Sugar"(Without double quotation marks), press the Enter key, or click the magnifier icon on the right of the search box.

5.ThenWindows 8"No apps match your search.(No matching application) "If the search support is added, the search results will change.

6.ReturnVisual StudioAnd stop debugging.

 

Task2-Added search support

To implement search, you must write a search for the application.Contracts.Visual StudioWill help complete most of the workJavascript contractInsert to application. ModifyJavascriptTo search for specific domains of application data. This process is very simple. For details, see the following steps.

1.Right-clickSolution ExplorerOfHtmlFolder, select"Add-new item"Command to add a searchContractsearch.html,3.

Figure3

Add searchContracts

2.Visual StudioTheHtmlFolder creation3Files:Search.html,Search.cssAndSearch. js. SetSearch.cssMove to projectCSSFolderSearch. jsMove to projectJSFolder.

3.InDefault.htmlAdd the following statement to ensure that the application can be loaded at startupSearch. js:

Html

<Scriptsrc = "/JS/search. js"> </SCRIPT>

4.OpenSearch. js, FindSearchdataFunction. This function is used by the userSearchSearch called when a super button initiates a searchContracts. TheCodeTo search recipes. At the end of the function, it is called three times using a regular expression.MatchOfReturnStatement to modify it:

Javascript

Return (item. Title. Match (RegEx) | item. Directions. Match (RegEx ));

Note:: The above code willContosocookbookSearch for the title and practice attributes of each recipe, and find the recipe that matches the content entered in the search box. The search content will pass the ParameterQuerytextPassSearchdataFunction. If you want to extend the search scope to other recipe attributes, you can modify this parameter.

5.Still inSearch. js, FindIteminvokedFunction. When you select the search result listListviewThis function is called. RemoveNav. navigateCall the annotator before the statement and modify itItemdetailpage.html:

Javascript

Nav. navigate ("/html/itemdetailpage.html", {item: item. Data });

6.OpenSearch.html.HtmlThe Code defines how the search result is displayed. Set the class to"Item"DivIn this element, set the class to"Item-content"Div. SetDivContent (including1ItemsH3Element and2ItemsH4Element) with the following statement:

Html

<H3 class = "item-title win-type-ellipsis" data-win-bind = "innerhtml: effectitlesearch. marktext">

<H4 class = "item-subtitlewin-type-X-small win-type-ellipsis">

Preparation Time: <spandata-win-bind = "textcontent: preptime"> </span> minutes

</H4>

7.Still inSearch.html, SetLinkModify the reference address of the elementSearch.cssTo make it referenceCSSFolderSearch.css(IN2You have moved it to this folder ):

Html

<Link href = "/CSS/search.css" rel = "stylesheet">

8.OpenSearch.css, Add the highlighted code below. Their effect is to slightly increase the size of the recipe image displayed in the search results, but at the same time ensure that the image remains in the original size ratio:

CSS

. Search section [role = Main]. resultslist. Item {

/* Define a grid with columns for an icon, spacing and item details */

-MS-grid-columns: 62px 8px 1fr;

-MS-grid-rows: 1fr;

Display:-MS-grid;

Height: 100%;

Width: 100%;

}

 

. Search section [role = Main]. resultslist. item. item-image {

-MS-grid-column: 1;

-MS-grid-row: 1;

Height: 45px;

Margin-top: 5px;

Width: 60px;

}

9.PressF5Start the application.

10.Display the super button toolbar.

11.Click"Search"Super button, displayedMetro.

12.Enter"Rice"(Without double quotation marks), press enter, or click the magnifier icon on the right of the search box.

13.Confirm that the search result appears4Recipes (4).

 

 

 

Figure4

Search for"Rice"Results

14.Select a recipe and confirm the details.

15.ReturnVisual StudioAnd stop debugging.

 

Task3-Optimize the search result page

So far, everything is normal. InVisual StudioAdd searchContractsVery simple. Make some small modifications to achieveContosocookbookThe search function of the application. However, have you noticed any strange terms at the top of the search results page? It does not display a specific group name, such as"ChineseAndItalian", But displays"Group 1","Group 2 +. Simply modifySearch. jsTo modify the display result.

1.OpenSearch. jsFind the comment statement"Todo: replace or remove examplefilters.".

2.Comments the following two lines of code (two callsThis. Filters. Push) With the following statement:

Javascript

Data. Groups. foreach (function (Group ){

This. filters. push ({Results: NULL, text: group. title, predicate: function (item) {return item. group. key = group. key ;}});

}, This );

Note:: These statements willVisual StudioReplace the generated hardcoded group name with the applied recipe group name.

3.Restart the application and search"Rice". At this time, the common group name at the top of the page will be replaced with the recipe group name,5.

Figure5

Search results with recipe group titles

4.ReturnVisual StudioAnd stop debugging.

 

Task4-Add search suggestion

We make the last improvement to the search experience and provide some suggestions when users enter search keywords in the search box. This is easy to implement; we only need to add oneSuggestionsrequestedEvent processor. The method is as follows:

1.OpenSearch. js, At the bottom of the file (OnquerysubmittedAfter the event processor) Add the following functions:

Javascript

Appmodel. Search. searchpane. getforcurrentview (). onsuggestionsrequested = function (eventobject ){

VaR text = eventobject. querytext. tolowercase ();

VaR terms = ["salt", "Pepper", "water", "egg", "vinegar", "Flour", "Rice", "Oil"];

 

Terms. foreach (function (TERM ){

If (term. indexof (text) = 0 ){

Eventobject. Request. searchsuggestioncollection. appendquerysuggestion (TERM );}

});

};

note : the code added above is salt , pepper , and water , egg , vinegar , flour , and rice and oil Provide pattern matching recommendations. If you enter " SA ", the word salt is displayed in the search pane as a recommended supplementary word. Of course, we can add more suggestions. If you want to display ke " ketchup , you only need to add this word to the list.

2.Restart the application and search for"Vinegar". Confirm"Vinegar"Appears in the suggestion list under the search box,6.

Figure6

Recommended search results

3.ReturnVisual StudioAnd stop debugging.

Note: ThisArticleThis is the script for Windows 8 online lab on msdn. It is for your reference only. If you want to experience the complete experiment, click the msdn online lab below

Http://msdn.microsoft.com/zh-cn/hh968278