Search

The Search is prominently featured in the Main ToolBar, but you can use it anywhere on the page if you like. Note that the API is in any case identical.

You can initialize a Search with data-ts="Search". The classname ts-inset will add an outline (so that we can see how it behaves on this white background).

<div data-ts="Search" id="mysearch" class="ts-inset"></div>

The search field expands when the field is focused by the user or whenever there's a non-empty value in the field. You can change the value like this:

var search = ts.ui.get('#mysearch');
search.value = 'Hello world';

To keep the field expanded at all times, simply assign the CSS classname ts-expanded.

Search info

The data-ts.info attribute works to show a title (mouseover tooltip) when the field is collapsed and a placeholder when the field is expanded.

<div data-ts="Search" class="ts-inset"
	data-ts.info="Search amongst the things"></div>

Search callbacks

The onsearch callback gets invoked when when the user presses ENTER.

var search = ts.ui.ToolBar.search();
search.value = 'Press ENTER here';
search.onsearch = function(value) {
	ts.ui.Notification.success(value || 'Search cleared');
};

If defined, the onidle method gets called whenever the user pauses typing.

var search = ts.ui.ToolBar.search();
search.value = 'Try it now!';
search.onidle = function(value) {
	ts.ui.Notification.success(value);
};

The onidle method may also be called when the field loses focus. The idletime property controls the timeout value, default is 500 (milliseconds).

Here' an overview of the properties and methods of the Search component.