Mar 202014
 
 March 20, 2014  Posted by at 1:57 pm C# & F#, WinRT  Add comments

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)

User friendly SearchBox in Windows Store Apps: separators, suggestions and result items
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.

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

 

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]

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

What is 10 + 9 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)