Search Box

1 minute read


Input Parameters

Name Type Description
className string The class name to apply to the main element.
el HTMLElement The element to render the search box to.
onClick (searchText: string, ev?: Event) => void The search icon click event.
placeholder The search box placeholder text. (Default is Search)  
type number The search box type.
value string The search box value.


Name Type/Description
get() Returns the fabric component.
getValue() Returns the search text.
setValue(value: string) Sets the search text.

Fabric Interface

Name Type/Description
_clearOnly boolean
_container HTMLDivElement
_searchBox HTMLDivElement
_searchBoxClearButton HTMLDivElement
_searchBoxExitButton HTMLDivElement
_searchBoxField HTMLInputElement


var $REST = require("gd-sprest-js");

// Create the search box
var el = document.querySelector("#searchbox");
    el: el,
    onClick: function(filterText) {
        // Code goes here


import { Fabric } from "gd-sprest-js";

// Create the search box
let el = document.querySelector("#searchbox");
    type: Fabric.SearchBoxTypes.Collapsed,
    onClick: (filterText) => {
        // Code goes here