Adding Auto-suggestion to Metro Style App Search Contract

As promised on my post about adding search to C# metro style app, I will enhance the sample project from the first post by adding auto-suggestion (auto-complete) capability.

If you have already implemented search contract on your metro style app project, adding auto-suggestion is just a matter of registering an additional event handler (yes, WinRT API is really that easy).

Anyway, let’s get started.

First, I register a SuggestionRequested event handler in the OnLaunced method.

        protected override void OnLaunched(LaunchActivatedEventArgs args)
        {
            SamplePeople.BuildSamplePeople();

            SearchPane.GetForCurrentView().SuggestionsRequested += OnSuggestionsRequested;

            // Do not repeat app initialization when already running, just ensure that
            // the window is active
            if (args.PreviousExecutionState == ApplicationExecutionState.Running)
            {
                Window.Current.Activate();
                return;
            }

            if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)
            {
                //TODO: Load state from previously suspended application
            }

            // Create a Frame to act navigation context and navigate to the first page
            var rootFrame = new Frame();
            if (!rootFrame.Navigate(typeof(MainPage)))
            {
                throw new Exception("Failed to create initial page");
            }

            // Place the frame in the current Window and ensure that it is active
            Window.Current.Content = rootFrame;
            Window.Current.Activate();
        }

Second, I reuse the code in SearchResult page in the first post and put it in OnSuggestionRequested method.

        private void OnSuggestionsRequested(SearchPane sender, SearchPaneSuggestionsRequestedEventArgs args)
        {
            string queryText = args.QueryText.ToLower();

            var suggestions = SamplePeople.People
                .Where(p => p.LastName.ToLower().Contains(queryText.ToLower())
                        || p.FirstName.ToLower().Contains(queryText.ToLower())
                        || p.ResidenceState.ToLower().Contains(queryText.ToLower()));

            foreach (var suggestion in suggestions.Select(p => string.Format("{0}, {1} ({2})", p.LastName, p.FirstName, p.ResidenceState)))
            {
                args.Request.SearchSuggestionCollection.AppendQuerySuggestion(suggestion);
            }
        }

The important part is how I add the suggestion to the SearchSuggestionCollection. The collection requires string, but it depends on the app to put the meaningful strings as suggestions. As my query is filtering either last name, first name, or state, I combined them together as a suggestion.

image

image

image

As you can see, Windows 8 also helps by highlighting the search term in those suggestions, so what you choose as suggestion strings will determine how easy to search on your application.

Hope you enjoy this short post. At the time of this writing, we already know that Windows 8 will be available (GA) on October 26th. Let’s get ready soon.  Enjoy coding!

Advertisements

One thought on “Adding Auto-suggestion to Metro Style App Search Contract

  1. Pingback: Adding Search to your C# Metro Style App | Cyan By Fuchsia

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s