Global search - best practice?

Dear community,

I want to implement a kind of global search as an entry point of the application. Let's say, I have a couple of entities. Pets and cars. I want to implement a search bar and my API gives me all pets and cars that have been found that are "brown".
I think about a list that displays all relevant hits. 3 pats and 2 cars. I want to have an icon for all pets and all cars. Besides the name in bold and a short description below. Then I can click on one of those items and see the details page.
So what would be the best approach to implement this?
I think the API can cover the type, name, description and link to the detail view. But how do I configure the result list?
A DataList using templates? How can I then get the right icon based on the type?

I want to use Blazor by the way.

Maybe this is an useful use case for some of us. This prevents the user to know where he/she have to find details. Just search and find all related objects. A little bit of "Amazon-experience"

Appriciating all good advices :slight_smile:

1 Like

That depends on what an icon is. Is it RadzenIcon (which allows you to use all of the Material icons)? Or is it a custom image(s)?

There is no need for a custom image. An icon that comes with Material is fairly enough.

Then you can use multiple icon components whose Visible property is set to match the desired type:

For type 1:

Visible = ${data.Type == "type1"}

For type 2

Visible = ${data.Type == "type2"}

A similar scenario is covered in the Create a complete application tutorial.