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

  • How to display images in search suggestions

    Posted by suresh on 07/13/2015 04:14am

    How can i display images in search suggestions?

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

Top White Papers and Webcasts

  • Modern contact centers support a variety of digital channels—email, chat, co-browsing, social, video—over multiple digital touchpoints (web or mobile devices). What they lack is the ability to link interactions in a step-by-step journey to provide a personal, contextual experience for each customer. Download this eBook. Learn how you can: Design a successful digital customer engagement strategy Provide agents with a 360-degree view of the customer across all digital channels and voice Deliver …

  • Despite the popularity of cloud software, many companies are reluctant to move their contact centers to the cloud. This white paper breaks down cloud architecture, the benefits of cloud and the difference between cloud and on-premise systems. It's a helpful resource for companies who are curious about cloud contact center software but have reservations. It offers practical explanations, extensive research and a guide to selecting the right cloud contact center vendor.

Most Popular Programming Stories

More for Developers

RSS Feeds

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