AutoSuggestBox In UWP

Raj Kumar
8y
21.5k
0
1

Article

AutoSuggestBox provides a list suggestions based on what user type. Suggestions works when text has been changed by the user and take care of providing relevant suggestions for the control to display.

Three type of actions mostly use in AutoSuggestBox,

Text Changed: Fires when user enters text, it updates the suggestion list.
Suggestion Chosen: When choose suggestion in suggested list, update the text box.
Query Submitted: When submits a query, it shows the query result.

Getting Stated:

Here are the steps to get started with Windows Universal App:

Start Visual Studio 2015
Create a new project
Click Visual C# and Windows, then select Universal
Click on Blank App (Universal Windows)
Provide the name and location of project
Click OK

First drag and drop AutoSuggestBox control on page from toolbox.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<AutoSuggestBox HorizontalAlignment="Left" x:Name="txtAutoSuggestBox" TextChanged="AutoSuggestBox_TextChanged" QuerySubmitted="AutoSuggestBox_QuerySubmitted" SuggestionChosen="AutoSuggestBox_SuggestionChosen" QueryIcon="Find" PlaceholderText="Search" VerticalAlignment="Top" Width="294" />
</Grid>

public sealed partial class MainPage: Page

{
    public MainPage()
    {

        suggestions = new ObservableCollection < string > ();

        this.InitializeComponent();

    }

    private ObservableCollection < String > suggestions;

    private void AutoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)

    {

        if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)

        {

            suggestions.Clear();

            suggestions.Add(sender.Text + "1");

            suggestions.Add(sender.Text + "2");

            suggestions.Add(sender.Text + "3");

            suggestions.Add(sender.Text + "4");

            suggestions.Add(sender.Text + "5");

            suggestions.Add(sender.Text + "6");

            suggestions.Add(sender.Text + "7");

            suggestions.Add(sender.Text + "8");

            suggestions.Add(sender.Text + "9");

            sender.ItemsSource = suggestions;

        }

    }

    private void AutoSuggestBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)

    {

        if (args.ChosenSuggestion != null)

            txtAutoSuggestBox.Text = args.ChosenSuggestion.ToString();

        else

            txtAutoSuggestBox.Text = sender.Text;

    }

    private void AutoSuggestBox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)

    {

        txtAutoSuggestBox.Text = "Choosen";

    }

}

Output: