User friendly SearchBox in Windows Store Apps: separators, suggestions and result items

A quick writeup as I’m having a bit of a crazy week preparing for Nebraska Code Camp (blog post coming up tomorrow on that) and the workshops I have there plus settling in on the new job.
Many if not all apps would benefit from having a search function, and in Windows Store Apps the SearchBox control is now recommended over the charm Search. I would encourage people to go the extra mile when implementing search and making sure that they provide suggestions and results.

The SearchBoxSuggestionsRequestedEventArgs which are triggered when the user is typing for a new search lets us append both suggestions and results. Suggestions can be used as result if you only want to append strings and don’t need any functionality beyond that.

When you append an item or items to the SearchSuggestionCollection it is recommended that you take advantage of search separators to separate suggestions and results and group the items. Here is an example where I’m doing exactly that (image here, code further down)

When appending a result item you get to pass in more information such as label description, tag, image and so on. Visually they are more pleasing and allows for more information.

If item is selected a separate event is triggered, ResultSuggestionChosen, and you can grab the tag (which should be unique) and then send the user to the appropriate result page. Only use a result item as a suggestion when the item does exist and the user can be redirected upon selection.

[sourcecode language=“XML”]
private string[] fruit = new[] { “Banana”, “Apple”, “Orange”, “Lemon”, “Pinapple” };
private string[] veggies = new[] { “Carrot”, “Cabbage”, “Squash”, “Sellery”, “Broccoli” };

    private void SearchBox\_SuggestionsRequested(SearchBox sender, SearchBoxSuggestionsRequestedEventArgs args)  
    {  
        AppendToSearchSuggestion(args.Request, args.QueryText, fruit, "Fruit", 3);  
        AppendToSearchSuggestion(args.Request, args.QueryText, veggies, "Veggies", 3);  
    }  

    private void AppendToSearchSuggestion(SearchSuggestionsRequest request,string query, string[] items, string label, int max)  
    {  
        if (request == null) return;  

        var c = items.Where(x => x.IndexOf(query, StringComparison.OrdinalIgnoreCase) >= 0).ToArray();  

        // grab the collection  
        var collection = request.SearchSuggestionCollection;  

        // add separator  
        collection.AppendSearchSeparator(String.Format("{0} ({1})", label, c.Distinct().Count()));  

        // add suggestions  
        collection.AppendQuerySuggestions(c.Take(max));  

        // OR: add result with image and more  

        collection.AppendSearchSeparator("With image");  

        var stream = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/milk.jpg"));  
        // add suggestions  
        collection.AppendResultSuggestion("Milk", "Yummy milk", "01", stream, "No Img");  
    }

[/sourcecode]

User friendly SearchBox in Windows Store Apps: separators, suggestions and result items

Comments