AutoSuggestBox In UWP

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:

Enter a number in text box then suggestions also displaying.

Conclusion:

For more information, download attached source code of this sample. If any question, then please leave a comment in C# corner comment section.

Read more articles on Universal Windows Apps:

6 Comments

Join the conversation! Your thoughts help the community grow.

Prince Afolabi9y ago
Prince AfolabiI want to use the autosuggestbox but my data is from google map API, can you help me on that? because it is not manual data
PraveenKumar Gopalakrishnan10y ago
How to append data from table to display in autosuggestbox
Pradeep Sahoo10y ago
Nice share
Kirtan Parmar10y ago
great...thanks raj for sharing
Vignesh Mani10y ago
Good
Sibeesh Venu10y ago
Nice Share