Working with the New In-app Search Control in Windows 8.1

Introduction

During Build 2013, the annual conference targeted towards developers of Windows platforms, Microsoft announced over 5000 new APIs coming as part of Windows 8.1, a free update over Windows 8.

One of the new features announced was the search-box control, which can be used to provide search results. Now, there is a dedicated control to represent the ability to search within your application.

The Search-box control is available to both XAML developers as well as JavaScript developers.

 For XAML developers, it is available in the Windows.UI.Xaml.Controls namespace. JavaScript developers can use the SearchBox controls in WinJS.UI namespace.

The SearchBox control allows the application to have complete control over the search experience (You do not need to use global search to search within the application).

The SearchBox control works by integrating with a search contract to provide deep integration within the application, which allows for support of search suggestions and results. Additionally, there is built-in support for touch, keyboard and mouse interaction.

The Windows 8 Search contract allows up to five suggestions, three history items, and result suggestions separated by image.

The SearchBox also has first-class IME support allowing non-Latin characters to be used within the application.

To provide search suggestions for a SearchBox control, one needs to implement the AppendQuerySuggestion to append a query suggestion to the list of search suggestions for the search pane.

When the user submits a search term, the application can handle the SearchBox.QuerySubmitted event to track what is being searched.

Applications should handle the SearchBox.SuggestionsRequested event to ensure that the application provides new suggestions to display in the search pane when a user changes the text being searched.

Hands On

In our Demo, we will implement a simple application, which will contain a SearchBox where users will search for car names. When the user types in a few letters, the SearchBox will provide suggestions of matching car names.

Start Visual Studio 2013 and create a new Windows Store Project of type Blank App (XAML) titled Windows8.1SearchBoxDemo.

New Project
New Project

Open MainPage.xaml in the XAML editor and add a SearchBox Control on the page. Call it searchBoxMySearchBox.

At this time, your XAML will the code below.

Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <SearchBox x:Name="searchBoxMySearchBox" HorizontalAlignment="Left" Margin="534,210,0,0" VerticalAlignment="Top"/>
 
    </Grid>
 

We will now implement the QuerySubmitted event handler in which we will store the term the user is querying. For this, we need to add a couple of controls – one TextBox and one TextBlock. The XAML for these controls is below.

<TextBlock HorizontalAlignment="Left" Margin="482,58,0,0" TextWrapping="Wrap" Text="Searching for" VerticalAlignment="Top"/>
        <TextBox x:Name="textBoxSearchTerm" HorizontalAlignment="Left" Margin="575,58,0,0" TextWrapping="Wrap" VerticalAlignment="Top"/>

Now, double-click the SearchBox’s QuerySubmitted event handler and add the following code.

private void searchBoxMySearchBox_QuerySubmitted(SearchBox sender, SearchBoxQuerySubmittedEventArgs args)
        {
            textBoxSearchTerm.Text = sender.QueryText;
        }

Next, we will add a string collection to represent the entire suggestion list for the cars.

public sealed partial class MainPage : Page
    {
        private static readonly string[] carList = {
                "Saturn", "Isuzu", "Toyota", "Nissan", "Ford", "Chevy", "Honda", "Hummer", "Tata", "Mahindra"
             
 

Finally, we will implement the SuggestionsRequested event handler. In this method, we will create a SearchSuggestionCollection object to which we will add any car name that matches the string and present it as a suggestion.

private void searchBoxMySearchBox_SuggestionsRequested(SearchBox sender, SearchBoxSuggestionsRequestedEventArgs args)
        {
            Windows.ApplicationModel.Search.SearchSuggestionCollection suggestionCollection = args.Request.SearchSuggestionCollection;
            foreach (string suggestion in carList)
            {
                if (suggestion.StartsWith(args.QueryText, StringComparison.CurrentCultureIgnoreCase))
                {
                    suggestionCollection.AppendQuerySuggestion(suggestion);
                }
            }
        }

Our simple application using the SearchBox control is ready. You can now run it and give it any car name like “Honda” to test it out.

SearchBox Application
SearchBox Application

Summary

In this article we learned how we can provide a rich in-app search experience using the SearchBox control in Windows 8.1 applications. I hope you have found this information useful.

About the Author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com



Related Articles

Downloads

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • On-demand Event Event Date: February 12, 2015 The evolution of systems engineering with the SysML modeling language has resulted in improved requirements specification, better architectural definition, and better hand-off to downstream engineering. Agile methods have proven successful in the software domain, but how can these methods be applied to systems engineering? Check out this webcast and join Bruce Powel Douglass, author of Real-Time Agility, as he discusses how agile methods have had a tremendous …

  • The mobile market is white hot. Building a well-crafted product development plan that addresses market research, strategy, design, and development will provide the greatest chance for success. Each phase of an app's lifecycle is critical to the its overall success and feeds into the next step of the process of product development for the app. This white paper examines the five key phases of mobile app creation, one by one, to understand how they work together to help create a successful mobile app.

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date