I recently started a series of postings from my tour of presentations in Europe and the UK. Today I’d like to return to Searching (which I started to cover here), and this time take a look at what it takes to have your application offer Search suggestions as the user types into the Search box.
To examine this, we’ll create a Windows 8 application with the suggestions hard coded, but you can just as easily obtain the suggestions from a web service, or database, etc.
Once again what I’m going to do is strip down one of the Microsoft SDK examples and then build it up from scratch. You can find the original sample by clicking on Help->Samples in Visual Studio. The one you want is Search Contract.
To begin, create a new Blank application in Visual Studio and call it SearchQueryList. The very first thing to do is to double-click on PackageAppxManifest and then click on the Declarations tab. Choose Search from the available declarations and add it to the project.
Open App.xaml.cs and override OnSearchActivated as follows,
This makes a call to EnsureMainPageActivatedAsync, so let’s add that as well, while we are here,
Let’s turn to MainPage.xaml where our UI is dead-simple, just a text block to display the user’s query selection,
All the interesting work happens in the code behind for MainPage.
We begin by defining a static reference to MainPage itself, along with a private member of type SearchPane.
These are initialized in the constructor,
In addition, at the top of the file, we create a constant and, more important, we initialize a static array of strings that will serve for our suggestion list,
In the OnNavigatedTo method we register to be notified of three events:
- Query suggestions are requested
- A Query suggestion is chosen
- The Query is submitted
Key to this discussion is the implementation of OnSearchPaneSuggestionsRequested – the method that is called as each letter is typed into the query pane,
Let’s take this method apart, step by step.
We begin by extracting the query string and making sure it isn’t empty,
We pull out the request which will hold our suggestions (unless we have an exact match), initialize a local boolean to false to keep track of whether we have found a recommendation, and begin iterating through each string in our suggestion list, so that we can compare it with the query string,
The first thing we check for is an exact match,
If we get an exact match we’re going to show the match prepended by an image that we’ve placed in the Assets folder,
Notice that in this case the string we’re assembling (with the image and the matching city name) is added by calling the AppendResultsSuggestion method on the SearchSuggestionCollection obtained from the request object we extracted earlier. See the figure below for what this looks like,
If we don’t get an exact match we look for a partial match and if we get one, we add the string to the suggestion list,
We then add some code to break the search off if we have 5 or more hits,
You can see what this looks like in the figure at the top of this article.
Finally, we update the TextBlock depending on whether we found any matches and if we found an exact match,
Once again, Windows is doing all the heavy lifting of obtaining the query and creating the suggestion list; all we have to do is to find the matching values and add them to the SearchSuggestionCollection in response to the SuggestionsRequested event.
You can find the complete source code for this project here