SearchBox

SearchBox renders a search field and a submit button inside a plain HTML form. Submitting it sends the browser to your results page with the query in the URL, for example /search?q=routing, so it works without script and in every render mode.

Usage

@using Osirion.Blazor.Cms.Web.Components

<SearchBox />

The results page reads the query and passes it to ContentList, which filters the content. Passing the query back to SearchBox keeps it in the field:

@page "/search"
@using Osirion.Blazor.Cms.Web.Components

<SearchBox Title="Search the docs" SearchQuery="@(Query ?? string.Empty)" />

@if (!string.IsNullOrWhiteSpace(Query))
{
    <ContentList SearchQuery="@Query"
                 ShowPagination="true"
                 ItemsPerPage="12"
                 NoContentText="No results found." />
}

@code {
    [SupplyParameterFromQuery(Name = "q")]
    public string? Query { get; set; }
}

The example apps place a SearchBox in their navigation menu (<SearchBox Class="p-3" /> in the Bootstrap app) and have a /search page that passes the q query to ContentList.

Parameters

Other attributes on the tag are captured but not rendered.

Behavior

• The form uses method="get" and role="search". Nothing is posted and no antiforgery token is needed.
• SearchBox does not search. ContentList with a SearchQuery splits the text on spaces and keeps the published items where any word appears, ignoring case, in the title, description, rendered HTML, categories or tags. It is a substring match over the loaded content, not a ranked full-text index.
• The field has a visually hidden label with the text "Search", and an aria-label set to Placeholder, which screen readers announce instead. The button is announced as "Submit search"; its visible text is hidden from screen readers. Both of these fixed texts are English, so on other languages set Placeholder and SearchButtonText and expect the button name to stay "Submit search".
• The submitted text reaches your page through the query string. Render it with Razor (@Query), which encodes it; never write it out as raw markup.

Styling

The button takes the primary button class of the CSS framework configured in the theming options: btn btn-primary for Bootstrap, mud-button mud-button-filled mud-button-filled-primary for MudBlazor, rz-button rz-button-primary for Radzen, and osirion-button osirion-button-primary for Fluent UI and for no framework. The field uses --osirion-background-primary, --osirion-border-color, --osirion-text-primary and --osirion-focus-ring-color.

Related

• Content List, which runs the search on the results page
• CMS navigation components