Achieve Google-Like Autosuggestions with the WinUI AutoComplete Control
Tags: csharp, dotnet, desktop
Published: 2022-05-06 12:45:20

---
title: Achieve Google-Like Autosuggestions with the WinUI AutoComplete Control
published: true
date: 2022-05-06 11:19:15 UTC
tags: csharp, dotnet, desktop
canonical_url: https://www.syncfusion.com/blogs/post/achieve-google-like-autosuggestions-with-the-winui-autocomplete-control.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2022/05/Achieve-Google-Like-Autosuggestions-with-the-WinUI-AutoComplete-Control-1-672x372.png
---

The Syncfusion [WinUI AutoComplete](https://www.syncfusion.com/winui-controls/autocomplete "WinUI AutoComplete control") loads and populates data in a suggestion list depending on the user’s input characters. Users can then select one or more items from the list. Items selected from the list can be displayed with images, text, and close buttons to remove them as needed.

## **Key features**

The key features of the WinUI AutoComplete control are as follows:

- Smoothly and dynamically presents items based on the user input.
- Does not include a dropdown button. When a user types, the dropdown automatically opens with suggestions.
- Handles a huge volume of data and shows suggestions based on logical matching instead of just string comparison.
- Also supports filtering, grouping, appearance customization, and more.

The best example of AutoComplete control is a search engine. When you search for something, suggestions are listed based on popular queries by other users.

In this blog, we will see how to achieve Google-like autosuggestions in a WinUI application using our AutoComplete control.

## **Google-like autosuggestions using the WinUI AutoComplete control**

Let’s fetch suggestions from the Google search engine and show them using the WinUI AutoComplete control **.**

![Google-Like Autosuggestions Using WinUI AutoComplete Control](https://www.syncfusion.com/blogs/wp-content/uploads/2022/05/Google-Like-Autosuggestions-Using-WinUI-AutoComplete-Control.png)
<figcaption>Google-Like Autosuggestions Using WinUI AutoComplete Control</figcaption>

### Step #1: Adding the WinUI AutoComplete control to your application

Follow these steps to add the AutoComplete control to the XAML page of your WinUI app:

1. First, create a [WinUI 3 desktop app for C# and .NET 5](https://docs.microsoft.com/en-us/windows/apps/winui/winui3/get-started-winui3-for-desktop "Create your first WinUI 3 project documentation").
2. Then, download and install the [Syncfusion.Editors.WinUI](https://www.nuget.org/packages/Syncfusion.Editors.WinUI "Syncfusion.Editors.WinUI NuGet package") NuGet package in the project.
3. Now, import the control namespace  **Syncfusion.UI.Xaml.Editors**  on the XAML page.
4. Initialize the WinUI AutoComplete control. Refer to the following code example.
```html
<Window
   x:Class="WinUI_Calendar.MainWindow"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local="using:WinUI_Calendar "
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:editors="using:Syncfusion.UI.Xaml.Editors"
   mc:Ignorable="d">
 <Grid>
   <editors:SfAutoComplete Width="300"/>
 </Grid>
</Window>
```

### Step #2: Get suggestions from the Google search engine based on user input

When we search for something in a search engine, we will get suggestions based on our input characters. Let’s see how to fetch suggestions from the Google search engine.

Refer to the following code to fetch suggestions as an XML document. Here, the query refers to the user’s input.

```csharp
string xmlSuggestions;
 
using (HttpClient client = new HttpClient())
{
  var searchQuery = "https://www.google.com/complete/search?output=toolbar&q=" + query;
  xmlSuggestions = client.GetStringAsync(searchQuery);
}
```

Let’s say we are trying to search for information about today’s weather, so we’ll use the partial input **how is the wea**. This will give us the following search query: [https://www.google.com/complete/search?output=toolbar&q=how%20is%20the%20wea&gl=us&hl=en&pws=0&gws\_rd=cr](https://www.google.com/complete/search?output=toolbar&q=how%20is%20the%20wea&gl=us&hl=en&pws=0&gws_rd=cr).

This query will give the following suggestions:

```html
<toplevel>
 <CompleteSuggestion>
   <suggestion data="how is the weather today"/>
 </CompleteSuggestion>
 <CompleteSuggestion>
   <suggestion data="how is the weather"/>
 </CompleteSuggestion>
 <CompleteSuggestion>
   <suggestion data="how is the weather tomorrow"/>
 </CompleteSuggestion>
 <CompleteSuggestion>
   <suggestion data="how is the weather going to be tomorrow"/>
 </CompleteSuggestion>
 <CompleteSuggestion>
   <suggestion data="how is the weather outside"/>
 </CompleteSuggestion>
 <CompleteSuggestion>
   <suggestion data="how is the weather in new york"/>
 </CompleteSuggestion>
 <CompleteSuggestion>
   <suggestion data="how is the weather in spanish"/>
 </CompleteSuggestion>
 <CompleteSuggestion>
   <suggestion data="how is the weather tonight"/>
 </CompleteSuggestion>
 <CompleteSuggestion>
   <suggestion data="how is the weather in chicago"/>
 </CompleteSuggestion>
 <CompleteSuggestion>
   <suggestion data="how is the weather in florida"/>
 </CompleteSuggestion>
</toplevel>
```

### Step #3: Parse the XML document and get the suggestions

With the suggestions in hand as an XML document, we need to parse it and get the required data. Once the data is collected, we return the accumulated data as a list.

Refer to the following code.

```csharp
XDocument doc = XDocument.Parse(xmlSuggestions);
var suggestions = doc.Descendants("CompleteSuggestion")
  .Select(
    item => item.Element("suggestion").Attribute("data").Value);
return suggestions.ToList();
```

### Step #4: Show suggestions using WinUI AutoComplete based on user input

Now that we know how to get suggestions from the Google search engine based on the user input characters. Let’s see how to implement this in the WinUI AutoComplete control.

When a user provides input in the AutoComplete control, the [FilterBehavior](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfAutoComplete.html#Syncfusion_UI_Xaml_Editors_SfAutoComplete_FilterBehavior "FilterBehavior property of WinUI AutoComplete control") property will populate the suggestions. It is of type [IAutoCompleteFilterBehavior](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.IAutoCompleteFilterBehavior.html "IAutoCompleteFilterBehavior interface of WinUI AutoComplete control").

Create the **CustomFiltering** class to implement the **IAutoCompleteFilterBehavior** interface. The [GetMatchingItemsAsync](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.IAutoCompleteFilterBehavior.html#Syncfusion_UI_Xaml_Editors_IAutoCompleteFilterBehavior_GetMatchingItemsAsync_Syncfusion_UI_Xaml_Editors_SfAutoComplete_Syncfusion_UI_Xaml_Editors_AutoCompleteFilterInfo_ "GetMatchingItemsAsync method of WinUI AutoComplete control") method will be called whenever a user starts typing. Then, the items that are returned by this method will be shown as suggestions in the dropdown.

Refer to the following code example.

```csharp
public class CustomFiltering : IAutoCompleteFilterBehavior
{
  public Task<object> GetMatchingItemsAsync(SfAutoComplete source, AutoCompleteFilterInfo filterInfo)
  {
    var result = GetGoogleSuggestions(filterInfo.Text);
    return Task.FromResult((object)result);
  }
 
  private IList<string> GetGoogleSuggestions(string query)
  {
    // Get suggestions using the Google search query.
  }
}

<editors:SfAutoComplete HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        PlaceholderText="Search something"
                        TextSearchMode="Contains"
                        Width="300"&gt;
 <editors:SfAutoComplete.FilterBehavior>
   <local:CustomFiltering/>
 </editors:SfAutoComplete.FilterBehavior>
</editors:SfAutoComplete>
```

![Google-Like Autosuggestions Using WinUI AutoComplete Control](https://www.syncfusion.com/blogs/wp-content/uploads/2022/05/Google-Like-Autosuggestions-Using-WinUI-AutoComplete-Control.gif)
<figcaption>Google-Like Autosuggestions Using WinUI AutoComplete Control</figcaption>

That’s all there is to it!

## GitHub demo

You can download a working example of [Google-like autosuggestions using WinUI AutoComplete control](https://github.com/SyncfusionExamples/syncfusion-winui-sfautocomplete-google-like-search-suggestion "Google-like autosuggestions using WinUI AutoComplete control GitHub demo") from GitHub.

## Conclusion

Thanks for reading! In this blog post, we have seen how to implement Google-like autosuggestions using the Syncfusion [WinUI AutoComplete](https://www.syncfusion.com/winui-controls/autocomplete "WinUI AutoComplete") control. For more details, refer to the [WinUI AutoComplete documentation](https://help.syncfusion.com/winui/autocomplete/getting-started "WinUI AutoComplete documentation") and [demo app in the Windows Store](https://www.microsoft.com/en-us/p/syncfusion-winui-controls-gallery/9n0fp16ddc06 "WinUI demo app in the Windows Store"). Try out the procedure in this blog post and leave your feedback in the comments section below.

For existing customers, the newest version of Essential Studio is available for download from the [license and downloads page](https://www.syncfusion.com/account/downloads "License and download page of Essential Studio"). If you are not yet a customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to check out the newest features.

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion support forum"), [feedback portal](https://www.syncfusion.com/feedback "Syncfusion feedback portal"), or [support portal](https://support.syncfusion.com "Syncfusion support portal"). We are always happy to assist you!