Default Theme

SearchBox

Overview

A search box (SearchBox) provides an input field for searching content within a site or app to find specific items.

Usage

Single select string type

<SearchBox ProvideSuggestions="@((filter) => { return ProvideSuggestions(filter); })"
           @bind-SelectedItem="SelectedItem" />
@if (SelectedItem != null)
{
    <h4>Selected item</h4>
    @SelectedItem
}

Multi select string type

<SearchBox ProvideSuggestions="@((filter) => { return ProvideSuggestions(filter); })"
           IsMultiSelect="true"
           @bind-SelectedItems="SelectedItems" />
@if (SelectedItems != null)
{
    <h4>Selected items</h4>
    <ul>
        @foreach (var item in SelectedItems)
        {
            <li>@item</li>
        }
    </ul>
}

Single select templated search suggestions

<SearchBox ProvideSuggestions="@((filter) => { return ProvideSearchItemSuggestions(filter); })"
           ProvideString="@((element) => { return ((SearchItem)element).Name; })">
    <SearchItemTemplate>
        <Persona Text=@(((SearchItem)context).Name)
 SecondaryText=@(((SearchItem)context).JobDescription)
 ImageUrl="personFace.jpg"
 Presence=@PersonaPresenceStatus.Online
 Size=@PersonaSize.Size48
 ShowInitialsUntilImageLoads="true" />
    </SearchItemTemplate>
</SearchBox>

Multi select templated search suggestions

<SearchBox ProvideSuggestions="@((filter) => { return ProvideSearchItemSuggestions(filter); })"
           ProvideString="@((element) => { return ((SearchItem)element).Name; })"
           IsMultiSelect="true"
           @bind-SelectedItems="SelectedPersons">
    <SearchItemTemplate>
        <Persona Text=@(((SearchItem)context).Name)
 SecondaryText=@(((SearchItem)context).JobDescription)
 ImageUrl="personFace.jpg"
 Presence=@PersonaPresenceStatus.Online
 Size=@PersonaSize.Size48
 ShowInitialsUntilImageLoads="true" />
    </SearchItemTemplate>
</SearchBox>
@if (SelectedPersons != null)
{
    <h4>Selected persons</h4>
    <ul>
        @foreach (var item in SelectedPersons)
        {
        <li>@(item.Name)</li>
        }
    </ul>
}

Multi select templated search suggestions and templated selected items

<SearchBox ProvideSuggestions="@((filter) => { return ProvideSearchItemSuggestions(filter); })"
           ProvideString="@((element) => { return ((SearchItem)element).Name; })"
           IsMultiSelect="true">
    <SearchItemTemplate>
        <Persona Text=@(((SearchItem)context).Name)
 SecondaryText=@(((SearchItem)context).JobDescription)
 ImageUrl="personFace.jpg"
 Presence=@PersonaPresenceStatus.Online
 Size=@PersonaSize.Size48
 ShowInitialsUntilImageLoads="true" />
    </SearchItemTemplate>
    <SelectedItemTemplate>
        <div style="display:inline;color:red;font-style:italic">@context.Name</div>
    </SelectedItemTemplate>
</SearchBox>

'Tell me what you want to do' search box

Start with entering 'a' in order to find suggestions

<div>Start with entering 'a' in order to find suggestions</div>
<SearchBox Placeholder="Tell me what you want to do"
           IconName="Lightbulb"
           ProvideSuggestions="@((filter) => { return ProvideWhatYouWantToDoSuggestions(filter); })"
           InputWidth="300">
</SearchBox>