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: 

1. Project Structure
2. UI view
3. JSON as local data
4. Generating your Model
5. Building  Data Access classes
6. 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.