The AutoSuggestBox control lets the user to type few characters and display the list of suggestions where the user can select from the list.

How to use AutoSuggestBox in UWP App ?

The usage of the control is pretty simple.

Step 1 : Add the AutoSuggestBox control to the Xaml page and include the event handler QuerySubmitted , TextChanged and SuggestionChosen.

<AutoSuggestBox x:Name="txtAutoComplete" HorizontalAlignment="Left" Header="Enter the country" Margin="10,10,0,0"  Width="242" QueryIcon="Find" QuerySubmitted="txtAutoComplete_QuerySubmitted" TextChanged="txtAutoComplete_TextChanged" SuggestionChosen="txtAutoComplete_SuggestionChosen" />

Note the properties “Header” which is used to display the text on top of the AutoSuggestBox and the QueryIcon set to “Find” to display the search icon which is clickable by the user.

The TextChanged event is used to limit the scope of the search that is being performed on the list of items which matches the text the user is typing.

The SuggestionChosen event is used to update the text box with the selected or choosen value from the list.

The QuerySubmitted is a special event that gets triggered when the user clicks the search button (Find Icon in this case) which is associated with the AutoSuggestBox.

Step 2: Add a member which is of type List<string> to the code behind file and initialize it with the data in the constructor and seit it to the ItemsSource property of the AutoSuggestTextBox as shown below.

List<string> countries = new List<string>();
public MainPage()
{
    this.InitializeComponent();
    countries = new List<string> { "United Kingdom", "United States", "United Arab Emrites", "ahmed", "India", "Canada" };
    txtAutoComplete.ItemsSource = countries;

}

Step 3 : In the TextChanged event of the AutoSuggestBox , get the search term and perform the filtering and assign the filtered data to the ItemsSource property.

private void txtAutoComplete_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
{
    if (args.CheckCurrent())
    {
        var search_term = txtAutoComplete.Text;
        var results = countries.Where(i => i.StartsWith(search_term)).ToList();
        txtAutoComplete.ItemsSource = results;
    }
}

Step 4 : In the SuggestionChosen event , fill the Text property of the AutoSuggestBox control with the SelectedItem.

private void txtAutoComplete_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
{
    txtAutoComplete.Text = args.SelectedItem as string;

}

Additionally , perform the filtering of the List in the QuerySubmitted event so that the list can be displayed when the user clicks on the search button associated with the AutoSuggestBox.

private void txtAutoComplete_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
{
    var search_term = args.QueryText;
    var results = countries.Where(i => i.StartsWith(search_term)).ToList();
    txtAutoComplete.ItemsSource = results;
    txtAutoComplete.IsSuggestionListOpen = true;
}

Now , when you run the application , and type few characters in the AutoSuggestBox , you should see the suggestions being displayed to the user.

Here’s the Complete Xaml page (MainPage.Xaml) that used in this blog post.

<Page
    x:Class="App22.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App22"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        
        <AutoSuggestBox x:Name="txtAutoComplete" HorizontalAlignment="Left" Header="Enter the country" Margin="10,10,0,0"  Width="242" QueryIcon="Find" QuerySubmitted="txtAutoComplete_QuerySubmitted" TextChanged="txtAutoComplete_TextChanged" SuggestionChosen="txtAutoComplete_SuggestionChosen" />
    </Grid>
</Page>

Here’s the complete code behind file (MainPage.Xaml.cs) .

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace App22
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        List<string> countries = new List<string>();
        public MainPage()
        {
            this.InitializeComponent();
            countries = new List<string> { "United Kingdom", "United States", "United Arab Emrites", "ahmed", "India", "Canada" };
            txtAutoComplete.ItemsSource = countries;

        }
       
        private void txtAutoComplete_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
        {
            var search_term = args.QueryText;
            var results = countries.Where(i => i.StartsWith(search_term)).ToList();
            txtAutoComplete.ItemsSource = results;
            txtAutoComplete.IsSuggestionListOpen = true;
        }

        private void txtAutoComplete_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
        {
            if (args.CheckCurrent())
            {
                var search_term = txtAutoComplete.Text;
                var results = countries.Where(i => i.StartsWith(search_term)).ToList();
                txtAutoComplete.ItemsSource = results;
            }
        }

        private void txtAutoComplete_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
        {
            txtAutoComplete.Text = args.SelectedItem as string;

        }
    }
}