AutoSuggestBox Control In Universal Apps

An AutoSuggestBox control lets you choose items as you write on a textbox.

An AutoSuggestBox control looks like this mainly:

Here's how it is basically declared:

<AutoSuggestBox Height="55" PlaceholderText="Search something..." />

AutoSuggestBox depends on "data" and works with "fuzzy search" algorithms since you need to validate the input as text changes.

I am planning to completely explain this example in 6 steps:

Project Structure
UI view
JSON as local data
Generating your Model
Building Data Access classes
Dealing with Fuzzy Search

Project Structure

Here's how my project looks like. There's a DataSource folder to deal with json and data access. This folder includes files such as the json data and the class that does the entire job for data access and fuzzy search.

UI View

I always want to keep everything simple, so the UI should be that. Here's my XAML codes for UI of our project.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<AutoSuggestBox x:Name="asugbox" Height="55" Margin="234,240,212,0" TextChanged="asugbox_TextChanged"
Text="" FontSize="32" PlaceholderText="Search a Continent..." QuerySubmitted="asugbox_QuerySubmitted"
SuggestionChosen="asugbox_SuggestionChosen" />
<TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="506,131,0,0" TextWrapping="Wrap"
Text="This isn't Google,Kid" VerticalAlignment="Top" FontSize="48"/>
</Grid>

Using JSON as local data

Here's how our "results.json" file look like:

{
"continents": [
{
"code": "AF",
"name": "Africa"
},
{
"code": "EU",
"name": "Europe"
},
{
"code": "NA",
"name": "North America"
},
{
"code": "OC",
"name": "Oceania"
},
{
"code": "SA",
"name": "South America"
}
]
}

Simply it has an array named continents and continent names, codes declared as group.

Generating your Model

Since continent codes are not useful for me, I'll be dealing with only their names. That's why I created such a model:

public class Continents
{
public string name;
public override string ToString()
{
return string.Format("{0}", name);
}
}

Model property "name" will be sufficient for our example.

Building Data Access Class

I have named this class "SearchQueries". The main job of this class simply is parsing json, sending the values to a generic list and matching continents that does fuzzy search.

Here's the complete code for my class:

public class SearchQueries
{
List<Continents> list = new List<Continents>();
public List<Continents> GetResults(string query)
{
return list;
}
public async void SetResults()
{
list.Clear();
Uri dataUri = new Uri("ms-appx:///DataSource/results.json");
StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(dataUri);
string jsonText = await FileIO.ReadTextAsync(file);
JsonObject jsonObject = JsonObject.Parse(jsonText);
JsonArray jsonArray = jsonObject["continents"].GetArray();
foreach (JsonValue groupValue in jsonArray)
{
JsonObject groupObject = groupValue.GetObject();
list.Add(new Continents() { name= groupObject.GetNamedString("name") });
}
}
public SearchQueries()
{
SetResults();
}
public IEnumerable<Continents> GetMatchingContinents(string query)
{
return list
.Where(c => c.name.IndexOf(query, StringComparison.CurrentCultureIgnoreCase) > -1)
.OrderByDescending(c => c.name.StartsWith(query, StringComparison.CurrentCultureIgnoreCase));
}
}

Dealing with Fuzzy Search

For this open your MainPage.xaml.cs.

We've added the following 3 events for AutoSuggestBox:

TextChanged event fires every time we enter something in AutoSuggestBox.
QuerySubmitted event fires once we submit a query.
SuggestionChosen event fires when the query submission ended with choosing an item and viewing it in AutoSuggestBox.

First of all create a new instance of data access class that deals with json and fuzzy search:

SearchQueries squeries = new SearchQueries();

Next add these codes for TextChanged event:

private void asugbox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
{
var matchingContinents = squeries.GetMatchingContinents(sender.Text);
sender.ItemsSource = matchingContinents.ToList();
}

Next add these codes for QuerySubmitted event:

private void asugbox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
{
if (args.ChosenSuggestion != null)
{
SelectContinent(args.ChosenSuggestion as Continents);
}
else
{
var matchingContinents = squeries.GetMatchingContinents(args.QueryText);
if (matchingContinents.Count() >= 1)
{
SelectContinent(matchingContinents.FirstOrDefault());
}
}
}

Next add these codes for SuggestionChosen event:

private void asugbox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
{
var continents = args.SelectedItem as Continents;
sender.Text = string.Format("{0}", continents.name);
}

And finally add these codes for selecting the continent and writing it to the control:

private void SelectContinent(Continents continents)
{
if (continents != null)
{
asugbox.Text = continents.name;
}
}

Now run the project and see how it goes:

Now you can customize it as you like. I used local JSON but you can also download JSON from web and parse it.

14 Comments

Join the conversation! Your thoughts help the community grow.

Make Luv11y ago
Please show example with mvvm.
Santhakumar Munuswamy11y ago
Good one
Mohammed Ibrahim11y ago
nice
- Ibrahim Ersoy11y ago
  Thank you!
Rakesh11y ago
Good share sir
- Ibrahim Ersoy11y ago
  Thank you!
Sibeesh Venu11y ago
Nice Share
- Ibrahim Ersoy11y ago
  Thank you!
Mukesh Kumar11y ago
Good article
- Ibrahim Ersoy11y ago
  Thank you!
Nilesh Jadav11y ago
Great Article sir
- Ibrahim Ersoy11y ago
  Thank you!
Harshad Pansuriya11y ago
Nice one
- Ibrahim Ersoy11y ago
  Thank you!