Tesserae - Search Box

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.

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

search-box-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.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

class

SearchBox

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

A single-line search input with a leading magnifier glyph, a trailing clear button and search-on-enter / debounced-input semantics.

Constructors

Properties

Methods

Method

SearchBox.SetKeyboardShortcut

public SearchBox SetKeyboardShortcut(params string[] keys)

Registers a global keyboard shortcut that focuses this SearchBox when pressed, and renders a visual chip showing the shortcut on the right side of the box. Modifier names are case-insensitive ("Ctrl", "Cmd", "Meta", "Alt", "Shift"). Example: .

Samples

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.

search-box-2-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.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);
        }
    }
}

Referenced by

Searchable Grouped List

SearchBox

Description

Usage

API reference

Constructors

SearchBox

Properties

SearchBox.TabIndex

SearchBox.IsFocused

SearchBox.IsEnabled

SearchBox.IsUnderlined

SearchBox.Text

SearchBox.Placeholder

SearchBox.IsInvalid

SearchBox.Size

SearchBox.Weight

SearchBox.TextAlign

SearchBox.Background

Methods

SearchBox.Render

SearchBox.Attach

SearchBox.SetText

SearchBox.SetPlaceholder

SearchBox.Disabled

SearchBox.Underlined

SearchBox.NotUnderlined

SearchBox.SetIcon

SearchBox.NoIcon

SearchBox.Focus

SearchBox.SearchAsYouType

SearchBox.OnSearch

SearchBox.SetKeyboardShortcut

SearchBox.Height

SearchBox.H

Samples

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

See also

Referenced by