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.

Package Osirion.Blazor.Cms.Web, namespace Osirion.Blazor.Cms.Web.Components. Source on GitHub.

@using Osirion.Blazor.Cms.Web.Components

@* Submits a GET request to this site's /search page, which lists the matching content *@
<SearchBox Placeholder="Search the documentation..." />

Submitting the demo opens this site's /search page with the query in the address.

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

Class goes on the outer div. Style and Theme are accepted but not written, and 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 is named by a visually hidden label whose text is Label, "Search" by default, and Placeholder is only a hint. The button is announced as "Submit search"; its visible text is hidden from screen readers. That button name is a fixed English text, so on other languages set Label, Placeholder and SearchButtonText and expect the button name to stay "Submit search".
• The input's id is Id when you set it, otherwise search-input- and a number derived from ActionUrl and QueryParameterName. It is the same on every render and in every process, so a prerendered and an interactive box agree. Two boxes with the same settings on one page need different Id values.
• 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, --osirion-text-tertiary (placeholder) and --osirion-focus-ring-color.

Related

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