Search code examples
c#blazorsyncfusion

Search Bar to return results from multiple APIs


I'm attempting to make a 'global search bar' in Blazor, but at the moment I'm struggling to figure out a solution to it. The page gets all required information in it's OnInitialised, so all I need to do is write a method that gets the value from an html input tag, translates that to a string, and then uses that to search through the Lists and I have:

HTML:

    <input id="search" class="global-search-bar" type="text"
name="search" placeholder="Jump into a project, resource, report or something else..."
 @oninput="@(() => Search())">

The search function takes a searchQuery string parameter, but I've got agitated and deleted the method itself. I'm stumped as to how to get this working correctly.

Also, we are using the Syncfusion component library if that provides an easier solution.


Solution

  • It appears that you are searching for a more robust solution for your global search bar in Blazor. Instead of manually implementing the search functionality, I would recommend utilizing the Syncfusion Blazor Autocomplete component. This component provides a comprehensive set of features and can simplify your search implementation.

    To begin, you can refer to the Syncfusion Blazor Autocomplete documentation and online demo.

    Documentation: https://blazor.syncfusion.com/documentation/autocomplete/getting-started

    Online Demo: https://blazor.syncfusion.com/demos/autocomplete/default-functionalities?theme=fluent

    By utilizing the Syncfusion Blazor Autocomplete component, you will have access to additional features such as filtering, suggestion highlighting, and more, which can enhance your search experience.