The search method reveals a dedicated search bar. The info property acts as placeholder and the onsearch method gets called whenever the user presses ENTER.

ts.ui.Header.search({
	info: 'Search amongst all the things',
	onsearch: function(value) {
		ts.ui.Notification.success(value || '(nothing)');
	}
});

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

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

The onidle method will also be called when the field loses focus. The idletime property controls the timeout value, default is 500 (milliseconds). You can also add one or more buttons to the Search.

var search = ts.ui.Header.search();
search.buttons.push({
	label: 'Search Now!',
	onclick: function() {
		search.search();
	}
});

The buttons have a search property that references the Search model. This will come in handy when you configure the Search via a single JSON payload.

ts.ui.Header.search({
	info: 'Search amongst all the things',
	buttons: [{
		label: 'Advanced Search',
		onclick: function() {
			console.log('Loading advanced search...');
			this.search.hide();
		}
	}]
});

Here' an overview of the Search model.