SearchBox Widget

An enhanced <input> element that provides common features for a search input.

Events

Types

Options

delay

Type: number

Sets the delay, in ms, after the last keystroke before a change event is fired.

minimumLength

Type: number

Sets the minimum length of text before the input triggers a change event. Clearing the input to 0 will always trigger a change event regardless of this setting.

Methods

change( )

Trigger the change event on the search input.

$(".input").searchBox('change');

count( value )

Sets the value of the count label on the search box. This can be used to provide feedback to the user as to how many ‘things’ the search currently matches. The value is a string.

The standard pattern to follow is:

  • if the search box is empty, set it to the number of available items: "300"
  • if the search box is not empty, set it to the number of matching items, as well as the number of available items: "120 / 300"

If value is null, undefined or blank, the count field is hidden.

$(".input").searchBox('count', '120 / 300');

value()

Returns: String

Gets the current value of the search input.

var type = $(".input").searchBox('value');

value( value )

Sets the current value of the search input.

$(".input").searchBox('value','hello');