How do I use a string to show Data in AutoSuggestBox in UWP

Question

I am trying to to use an AutoSuggestBox to Display the Data as being typed from a string.

I have tried making an array with some words that will be shown in the AutoSuggestBox as the user types, I however need the Data from the API which is being stored in a string to show in the AutoSuggestBox. For now, I am using an array to show 3 words as the user types, and the string that contains the API data, being added into a ListBox.

This however is being done in the AutoSuggestBox_TextChanged method, so as the user types, the data that we get gets added to the ListBox.

private async void AutoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
        {
            string[] Autoitems = new string[] { "check", "apple", "banana" } //Temporary Array for AutoSuggestBox

            var Auto = (AutoSuggestBox)sender;
            var Suggestion = Autoitems.Where(p => p.StartsWith(Auto.Text, StringComparison.OrdinalIgnoreCase)).ToArray();
            Auto.ItemsSource = Suggestion; //This displays only items from array as being typed.

            string searchedName = SearchBox.Text;

            myFood = await NutritionixAPI.GetFood(searchedName);

            //The data I get from the API is stored in the temp string
            string temp = myFood.hits[0].fields.item_name + " Calories: " + myFood.hits[0].fields.nf_calories + " Protein: " + myFood.hits[0].fields.nf_protein + " Fat: " + myFood.hits[0].fields.nf_total_fat;
            ResultListBox.Items.Add(temp); //temp string data is added to a listbox

            Total += myFood.hits[0].fields.nf_calories;
            TotalCalories.Text = ((int)Total).ToString(); //Adds the calories of each added food to the Total Variable and Display it
        } 

I expect the AutoSuggestBox to show me the Data from the string as being typed. For Example "Bana" - List of food pop up with the name Bana.

But the actual result is the AutoSuggestBox showing the ArrayData and the API Data in string being added into the ListBox as being typed.

Answer 1

I want the contents from the bottom arrow to show in the left arrow. So Bana Krisp Fruit Crackers Calories: 150 Protein to be showed in textbox where (Banana) is first arrow to the left.

For your requirement, you could get typed data with NutritionixAPI then converter the data to format string. Create a new list for AutoSuggestBox Itemsource that stored the format string.

private async void AutoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
{
    switch (args.Reason)
    {
        case AutoSuggestionBoxTextChangeReason.ProgrammaticChange:
        case AutoSuggestionBoxTextChangeReason.SuggestionChosen:
            sender.ItemsSource = null;
            return;
    }
    var query = sender.Text;
    var hits = await NutritionixAPI.GetFoods(query);
    List<string> items = new List<string>();
    foreach (var hit in hits)
    {
        string temp = hit.fields.item_name + " Calories: " + hit.fields.nf_serving_size_qty + " Protein: " + hit.fields.nf_serving_size_unit + " Fat: " + hit.fields.item_id;
        if (items.Exists(p => p == temp) == false)
        {
            items.Add(temp);
        }

    }
    var Suggestion = items.Where(p => p.StartsWith(sender.Text, StringComparison.OrdinalIgnoreCase)).ToArray();
    sender.ItemsSource = Suggestion;
}