SearchBox is an input component where user can search list of items and group found results into tags.

Insert SearchBox component anywhere in your razor code by writing it's tag:

<SearchBox />

In order for the code to be run, the component require 2 parameters to be set: T and ItemsSource.

T parameter is used to specify type of data. It can be set to any custom type:

<SearchBox T="Person" ItemsSource="Contacts" />

or to any standard type such as string:

<SearchBox T="string" ItemsSource="Countries" />

When search is being performed standard ToString method is used, so it's important that your class, struct or record have this method overridden to desired output.

Example

record MyTag(string Color, string Title)
{
    public override string ToString() => Title;
}

After the most important parameters are set, it can be continued with others, such as a parameter Tags that store list of all tags and supports two-way binding.

<SearchBox T="MyTag" ItemsSource="Products" @bind-Tags="Tags" Placeholder="red, blue etc." />

TagTemplate parameter can be used to further customise an appearance of tags.

Example

<SearchBox T="Tag" Items="_tags">
    <TagTemplate>
        <svg width="12" height="12" viewBox="0 0 10 10">
            <circle cx="5" cy="5" r="5" fill="@context.Color" />
        </svg>
        <span>
            @context.Title
        </span>
    </TagTemplate>
</SearchBox>