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

  • IT is rapidly moving to a more dynamic, services-based model in response to businesses' growing demand for faster creation and delivery of services to end customers. A consequence of this move is the emergence of hybrid IT organizations that can improve on-site data center asset utilization while leveraging cloud-based assets to extend services and capabilities. IDC asserts that controlling data flow in a hybrid IT environment is crucial for businesses to effectively transform themselves into data-driven …

  • Following an IT incident through to resolution is more than just acknowledging an alert and restarting a server. The recent State of On-Call Report found that it takes most companies an average of 10-30 minutes to resolve an incident with an average of 5 people involved. Imagine how much money and time companies are spending to deal with incident resolution. But what if you had a tool that offered solutions baked in? Or a tool that sent alerts to the right person or team every time? These are the kind of …

Most Popular Programming Stories

More for Developers

RSS Feeds

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