Search

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).

ts.ui.get('#mysearch', search => {
	search.value = 'Press ENTER here';
	search.info = 'Search amongst all the things';
	search.onsearch = function(value) {
		ts.ui.Notification.success(value || 'Search cleared');
	}
});

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.

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

Search callbacks

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

var search = ts.ui.get('#mysearch');
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.get('#mysearch');
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).

Search info

The info property doubles as both the placeholder when the field is expanded and the title (or tooltip) when the field is collapsed.

var search = ts.ui.get('#mysearch');
search.info = 'Search amongst the things';
search.value = ''; // collapse the field

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