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');