---
title: "Transforming Blazor AutoComplete: Unleashing Google-Like Search Suggestions"
published_at: "2023-11-15T11:48:48+00:00"
modified_at: "2026-01-09T13:29:47+00:00"
url: "https://www.syncfusion.com/blogs/post/google-like-suggestions-blazor"
excerpt: "This blog explains how to implement Google-like serach suggestions in the Syncfusion Blazor AutoComplete control."
taxonomy_category:
- "Blazor"
- "Development"
- "Syncfusion"
- "UI"
- "Web"
taxonomy_post_tag:
- "Autocomplete"
- "Blazor"
- "development"
- "Google"
- "Web"
---
# Transforming Blazor AutoComplete: Unleashing Google-Like Search Suggestions
[Saravanan G](https://www.syncfusion.com/blogs/author/saravanang)
The [Blazor AutoComplete](https://www.syncfusion.com/blazor-components/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/)
- [.NET Core 6.0 and above](https://dotnet.microsoft.com/en-us/download/dotnet/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)
.
### 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.
```
@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.
```
@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.
```
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.
```
static readonly HttpClient client = new HttpClient();
private async Task OnCustomFiltering(FilteringEventArgs args)
{
var suggestions = new List();
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_)
public method.
Refer to the following code example.
```
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.DropDowns;
@using System.Net;
@using System.Text.Json;
@code {
SfAutoComplete 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();
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);
}
}
```
Google-Like Search Suggestions in Blazor AutoComplete
## 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)
.
## 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)
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)
or by downloading our [NuGet package](https://www.nuget.org/packages/Syncfusion.Blazor)
. Feel free to have a look at our [online examples](https://blazor.syncfusion.com/)
and [documentation](https://blazor.syncfusion.com/documentation/introduction/)
to explore other available features.
If you want to contact us, you can reach us through our [support forums](https://www.syncfusion.com/forums)
, [support portal](https://support.syncfusion.com/)
, or [feedback portal](https://www.syncfusion.com/feedback/)
. 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)
- [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)
- [What’s New in Blazor Image Editor: 2023 Volume 3](https://www.syncfusion.com/blogs/post/whats-new-blazor-image-editor.aspx)
- [What’s New in Syncfusion Blazor: 2023 Volume 3](https://www.syncfusion.com/blogs/post/syncfusion-blazor-2023-volume-3.aspx)