Search Box

Documentation

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.

Interface

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

JavaScript

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

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

TypeScript

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

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