Transforming Blazor AutoComplete: Unleashing Google-Like Search Suggestions
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (182).NET Core  (28).NET MAUI  (233)Angular  (117)ASP.NET  (49)ASP.NET Core  (81)ASP.NET MVC  (87)Azure  (42)Black Friday Deal  (1)Blazor  (244)BoldSign  (15)DocIO  (24)Essential JS 2  (110)Essential Studio  (201)File Formats  (74)Flutter  (140)JavaScript  (227)Microsoft  (122)PDF  (86)Python  (1)React  (107)Streamlit  (1)Succinctly series  (131)Syncfusion  (993)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (46)Webinar  (53)Windows Forms  (59)WinUI  (72)WPF  (165)Xamarin  (159)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (11)Business intelligence  (55)Button  (4)C#  (164)Chart  (154)Chart of the week  (62)Cloud  (16)Company  (440)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (74)Development  (694)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (13)Excel  (43)Extensions  (31)File Manager  (8)Gantt  (23)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (530)Mobile MVC  (9)OLAP server  (2)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (48)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (8)Reporting / Back Office  (9)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (5)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (32)Solution Services  (4)Spreadsheet  (11)SQL  (15)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (426)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (648)What's new  (354)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Transforming Blazor AutoComplete: Unleashing Google-Like Search Suggestions

Transforming Blazor AutoComplete: Unleashing Google-Like Search Suggestions

The 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

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.

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.

<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.

<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.

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<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 public method.

Refer to the following code example.

@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);
    }
}
Google-Like Search Suggestions in Blazor AutoComplete
Google-Like Search Suggestions in Blazor AutoComplete

Reference

You can refer to the Google-like search suggestions in the Blazor Autocomplete demo on GitHub.

Conclusion

Thanks for reading! In this blog, we’ve seen how to implement Google-like autosuggestions in the Syncfusion 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 or by downloading our NuGet package. Feel free to have a look at our online examples and documentation to explore other available features.

If you want to contact us, you can reach us through our support forumssupport portal, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed