Transforming Blazor AutoComplete: Unleashing Google-Like Search Suggestions
Tags: blazor, webdev, autocomplete, ui
Published: 2023-11-22 16:05:23

---
title: Transforming Blazor AutoComplete: Unleashing Google-Like Search Suggestions
published: true
date: 2023-11-15 11:48:48 UTC
tags: blazor, webdev, autocomplete, ui
canonical_url: https://www.syncfusion.com/blogs/post/google-like-suggestions-blazor.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sfen6efm58up1depd6m2.png
---
The [Blazor AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete "Blazor AutoComplete") is a text box component that provides a list of suggestions to select from as the user types. It has several out-of-the-box features, such as data binding, filtering, grouping, UI customization, and accessibility. You can customize the suggestion list, filter type, minimum length, autofill feature, and more. You can also define your own data source for the suggestion list.

In this blog, we’ll explore how to implement Google-like search suggestions in the Blazor AutoComplete component. This involves conducting a Google search for each keypress in the Blazor AutoComplete and displaying the relevant Google search results in the suggestion list.

Let’s get started!

## Prerequisites

- [Visual Studio 2022](https://visualstudio.microsoft.com/vs/ "Visual Studio 2022")
- [.NET Core 6.0 and above](https://dotnet.microsoft.com/en-us/download/dotnet/6.0 "Download .NET 6.0")

## Procedure

Follow these steps to implement Google search suggestions in the Blazor AutoComplete control:

### Step 1: Create a Blazor server app

Create a new Blazor Server app using Visual Studio, install the Syncfusion Blazor packages, and configure the style and script references using the [getting started documentation](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio "Getting started with Blazor Server Side App in Visual Studio").

### Step 2: Add the AutoComplete component to the app

Add the Blazor AutoComplete control with the field settings configurations to the **Index.razor** file.

Refer to the following code example.

```csharp
<SfAutoComplete TValue="string" Placeholder="Search something" Titem="GoogleSearch" Autofill=true>
 <AutoCompleteFieldSettings Value="SuggestionText" />
</SfAutoComplete>

@code {
    class GoogleSearch
    {
        public string SuggestionText { get; set; } = String.Empty;
    }
}
```

### Step 3: Add the Filtering event in AutoComplete

Add the **Filtering** event to the AutoComplete component to handle custom search options within it.

```csharp
<SfAutoComplete TValue="string" TItem="GoogleSearch">
 <AutoCompleteFieldSettings Value="SuggestionText"/>
 <AutoCompleteEvents TItem="GoogleSearch" TValue="string" Filtering="@OnCustomFiltering" />
</SfAutoComplete>

@code {
    class GoogleSearch
    {
        public string SuggestionText { get; set; } = String.Empty;
    }
    private async Task OnCustomFiltering(FilteringEventArgs args)
    {
        
    }
}
```

### Step 4: Get suggestions from the Google search API based on user input

When we use a search engine to look for something, the suggestions are displayed based on the characters we enter.

Let’s see how to retrieve suggestions from the Google search engine.

You can use the following URL to get the search result data based on user-typed text.

```bash
https://suggestqueries.google.com/complete/search?client=firefox&q={typed text}
```

Refer to the following code example to obtain suggestions from the Google search engine.

```csharp
static readonly HttpClient client = new HttpClient();

private async Task OnCustomFiltering(FilteringEventArgs args)
{
    var suggestions = new List<GoogleSearch>();
    var url = "https://suggestqueries.google.com/complete/search?client=firefox&q=" + args.Text;

    var response = await client.GetAsync(url);
    response.EnsureSuccessStatusCode();
    using (var stream = await response.Content.ReadAsStreamAsync())
}
```

### Step 5: Parse the response content to a list of objects

The response content from the **HttpClient** request will be converted to JSON through stream conversion. The JSON data is then converted to a list of objects of the **GoogleSearch** class and loaded into the AutoComplete suggestion list using the [FilterAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FilterAsync_System_Collections_Generic_IEnumerable __1__ Syncfusion_Blazor_Data_Query_Syncfusion_Blazor_DropDowns_FieldSettingsModel_ "FilterAsync method of Blazor AutoComplete control") public method.

Refer to the following code example.

```csharp
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.DropDowns;
@using System.Net;
@using System.Text.Json;

<SfAutoComplete @ref="AutoCompleteRef" Placeholder="Search something" TValue="string" TItem="GoogleSearch" Width="500px">
 <AutoCompleteFieldSettings Value="SuggestionText" />
 <AutoCompleteEvents TItem="GoogleSearch" TValue="string" Filtering="@OnCustomFiltering" />
</SfAutoComplete>
@code {
    SfAutoComplete<string, GoogleSearch> AutoCompleteRef { get; set; }
    static readonly HttpClient client = new HttpClient();
    class GoogleSearch
    {
        public string SuggestionText { get; set; } = String.Empty;
    }
    private async Task OnCustomFiltering(FilteringEventArgs args)
    {
        var suggestions = new List<GoogleSearch>();
        var url = "https://suggestqueries.google.com/complete/search?client=firefox&q=" + args.Text;

        var response = await client.GetAsync(url);
        response.EnsureSuccessStatusCode();
        using (var stream = await response.Content.ReadAsStreamAsync())
        using (var reader = new StreamReader(stream))
        {
            var result = reader.ReadToEnd();
            var json = JsonDocument.Parse(result);
            var array = json.RootElement.EnumerateArray();
            foreach (var item in array.Skip(1).Take(1).ToList())

            {
                foreach (var suggestion in item.EnumerateArray())
                {
                    suggestions.Add(new GoogleSearch { SuggestionText = suggestion.GetString() });
                }
            }
        }
        await AutoCompleteRef.FilterAsync(suggestions);
    }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Google-Like-Search-Suggestions-in-Blazor-AutoComplete.gif" alt="Google-Like Search Suggestions in Blazor AutoComplete" style="width:100%">

  <figcaption>Google-Like Search Suggestions in Blazor AutoComplete</figcaption>

</figure>

## Reference

You can refer to the Google-like search suggestions in the Blazor Autocomplete demo on [GitHub](https://github.com/SyncfusionExamples/show-the-google-search-suggestions-in-the-blazor-autocomplete "Google-like search suggestions in the Blazor Autocomplete GitHub demo").

## Conclusion

Thanks for reading! In this blog, we’ve seen how to implement Google-like autosuggestions in the [Syncfusion Blazor AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete "Blazor AutoComplete") component. Try out the steps and leave your feedback in the comments section below!

Try our Blazor components by downloading a [free 30-day trial](https://www.syncfusion.com/account/manage-trials/downloads "Get the free evaluation of the Essential Studio products") or by downloading our [NuGet package](https://www.nuget.org/packages/Syncfusion.Blazor "Syncfusion.Blazor NuGet package"). Feel free to have a look at our [online examples](https://blazor.syncfusion.com/ "Syncfusion Blazor components online demos") and [documentation](https://blazor.syncfusion.com/documentation/introduction/ "Getting started with the Syncfusion Blazor Components") to explore other available features.

If you want to contact us, you can reach us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forums"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Unveiling New Date-Only and Time-Only Features in Blazor Pickers](https://www.syncfusion.com/blogs/post/date-time-only-blazor-pickers.aspx "Blog: Unveiling New Date-Only and Time-Only Features in Blazor Pickers")
- [How to Add a Blazor WebAssembly Project to an ASP.NET Core App](https://www.syncfusion.com/blogs/post/blazor-wasm-to-asp-dotnet-core.aspx "Blog: How to Add a Blazor WebAssembly Project to an ASP.NET Core App")
- [What’s New in Blazor Image Editor: 2023 Volume 3](https://www.syncfusion.com/blogs/post/whats-new-blazor-image-editor.aspx "Blog: What’s New in Blazor Image Editor: 2023 Volume 3")
- [What’s New in Syncfusion Blazor: 2023 Volume 3](https://www.syncfusion.com/blogs/post/syncfusion-blazor-2023-volume-3.aspx "Blog: What’s New in Syncfusion Blazor: 2023 Volume 3")