SearchBox

Description

SearchBox provides a dedicated input field for searching through content. It is designed to capture search queries either when the user presses "Enter" or automatically as they type. Being a part of the Components group, it offers customization options such as underlining, custom icons, disabled states, and more. Use the SearchBox when you need an interactive search input that supports user-triggered search events.

Usage

To instantiate a SearchBox, use the static helper method from Tesserae.UI. You can chain various methods to configure its appearance and behavior, including setting placeholder text, enabling a "search as you type" mode, customizing the icon, and handling the search event.

A trailing clear button appears whenever the box holds text, whether or not it is focused, and needs no setup: pressing it empties the box, keeps the caret in it and raises OnSearch with the empty query. Clear() does the same from code. The button is drawn by the toolkit rather than by the browser, so it looks the same in every browser instead of only appearing in Chromium in the browser's own colour and weight.

The input is only as tall as its text and sits centred in a box roughly twice its height, so most of what looks like the search box is the container around it. A press anywhere in that container focuses the input, and a box already holding the caret keeps it where it is.

Below is a simple example demonstrating how to create a SearchBox:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            new SearchBoxExample().Run();
        }
    }

    public class SearchBoxExample
    {
        public void Run()
        {
            // Create a SearchBox with a placeholder and an event handler that alerts the searched text.
            var searchBox = SearchBox("Search")
                .Underlined()
                .OnSearch((sender, value) => alert($"Searched for: {value}"));

            // Render the component and add it to the document body.
            var sampleComponent = searchBox;
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }
}

API reference

public class SearchBox : ComponentBase<SearchBox, HTMLInputElement>, ITextFormating, IHasBackgroundColor, ITabIndex, IRoundedStyle

public SearchBox(string placeholder = string.Empty)

public int TabIndex { set ; }

public bool IsFocused

public bool IsEnabled { get ; set ; }

public bool IsUnderlined { get ; set ; }

public string Text { get ; set ; }

public string Placeholder { get ; set ; }

public bool IsInvalid { get ; set ; }

public TextSize Size { get ; set ; }

public TextWeight Weight { get ; set ; }

public TextAlign TextAlign { get ; set ; }

public string Background { get ; set ; }

public SearchBox Clear()

public override HTMLElement Render()

public void Attach(ComponentEventHandler<SearchBox> handler)

public SearchBox SetText(string text)

public SearchBox SetPlaceholder(string error)

public SearchBox Disabled(bool value = true)

public SearchBox Underlined()

public SearchBox NotUnderlined()

public SearchBox SetIcon(UIcons icon)

public SearchBox NoIcon()

public SearchBox Focus()

public SearchBox SearchAsYouType()

public SearchBox OnSearch(SearchEventHandler onSearch)

public SearchBox SetKeyboardShortcut(params string[] keys)

public SearchBox OnShortcut(Action onShortcut)

public SearchBox Height(UnitSize unitSize)

public SearchBox H(int unitSize)

Samples

Basic SearchBox with Underline and Search-as-You-Type

The following sample demonstrates the creation of a SearchBox that is underlined, triggers search events automatically as the user types, and displays an alert with the search query.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            new SearchBoxSample().Run();
        }
    }

    public class SearchBoxSample
    {
        public void Run()
        {
            // Create a SearchBox with a placeholder "Search"
            var searchBox = SearchBox("Search")
                .Underlined()
                .SearchAsYouType()
                .OnSearch((sender, value) => alert($"Searched for: {value}"));

            // Render the SearchBox and add it to the document
            var sampleComponent = searchBox;
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }
}

See also

• TextBox – The basic text input component that forms the foundation of the SearchBox.
• Button – Often used in conjunction with search inputs for initiating search actions manually.