# Search Box

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.

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:

using System;
using System.Threading.Tasks;
using H5;
using static H5.Core.dom;
using Tesserae;
using static Tesserae.UI;

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

        // Render the component and add it to the document body.
        document.body.appendChild(searchBox.Render());
    }
}

• Attach(ComponentEventHandler handler)
  • Parameters:
    • handler: A callback of type ComponentEventHandler<SearchBox> that is triggered when the input is updated.
• SetText(string text) : SearchBox
  • Parameters:
    • text: The text value to set on the SearchBox.
  • Description:
    • Sets the current text of the SearchBox.
• SetPlaceholder(string placeholder) : SearchBox
  • Parameters:
    • placeholder: The placeholder text to display when the input is empty.
  • Description:
    • Sets the placeholder for the TextBox inside the SearchBox.
• Disabled(bool value = true) : SearchBox
  • Parameters:
    • value: When true, disables the SearchBox.
  • Description:
    • Toggles the enabled state of the SearchBox.
• Underlined() : SearchBox
  • Description:
    • Styles the SearchBox with an underline.
• NotUnderlined() : SearchBox
  • Description:
    • Removes the underline styling from the SearchBox.
• SetIcon(UIcons icon) : SearchBox
  • Parameters:
    • icon: An icon from UIcons to display in the SearchBox.
  • Description:
    • Sets a custom icon in place of the default search icon.
• NoIcon() : SearchBox
  • Description:
    • Removes any icon from the SearchBox.
• Focus() : SearchBox
  • Description:
    • Sets focus on the SearchBox after a slight delay to ensure it is visible in the viewport.
• SearchAsYouType() : SearchBox
  • Description:
    • Triggers the search event on every keyup event (excluding control keys), allowing for immediate feedback as the user types.
• OnSearch(SearchEventHandler onSearch) : SearchBox
  • Parameters:
    • onSearch: A delegate to handle the search event.
  • Description:
    • Registers an event handler that is called when the user initiates a search.
• Height(UnitSize unitSize) : SearchBox
  • Parameters:
    • unitSize: A UnitSize value to define the height of the input element.
  • Description:
    • Sets the height (and line height) of the input element and its container.
• H(int unitSize) : SearchBox
  • Parameters:
    • unitSize: An integer representing the height in pixels.
  • Description:
    • Shortcut method to set the height using pixel units.

• TabIndex (int)
  • Description:
    • Gets or sets the tab index of the SearchBox. This sets the tab order for keyboard navigation.
• IsEnabled (bool)
  • Description:
    • Indicates whether the SearchBox is enabled. When disabled, the component is styled accordingly.
• IsUnderlined (bool)
  • Description:
    • Gets or sets whether the SearchBox is displayed with an underline.
• Text (string)
  • Description:
    • Gets or sets the current text inside the SearchBox.
• Placeholder (string)
  • Description:
    • Gets or sets the placeholder text of the SearchBox.
• IsInvalid (bool)
  • Description:
    • Indicates whether the SearchBox is in an invalid state, often used to reflect validation errors.
• Size (TextSize)
  • Description:
    • Gets or sets the text size of the SearchBox content.
• Weight (TextWeight)
  • Description:
    • Gets or sets the text weight (such as regular or bold) of the SearchBox content.
• TextAlign (TextAlign)
  • Description:
    • Gets or sets the alignment of the text within the SearchBox.
• Background (string)
  • Description:
    • Gets or sets the background CSS style of the SearchBox container.

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.Threading.Tasks;
using H5;
using static H5.Core.dom;
using Tesserae;
using static Tesserae.UI;

public class SearchBoxSample
{
    public static void Main()
    {
        // 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
        document.body.appendChild(searchBox.Render());
    }
}

• 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.