Autocomplete

You can have an input field suggest results to the user and can be navigated using the keyboard or the mouse.

Basic Usage

Loading the autocomplete data from a static array.

  • ts.ui.get('#mystaticautocomplete', autocomplete => {
	autocomplete.data([
		{ key: 0, value: 'zero' },
		{ key: 1, value: 'one' },
		{ key: 2, value: 'two' },
		{ key: 3, value: 'three' },
		{ key: 4, value: 'four' },
		{ key: 5, value: 'five' },
		{ key: 6, value: 'six' },
		{ key: 7, value: 'seven' },
		{ key: 8, value: 'eight' },
		{ key: 9, value: 'nine' }
	]);
});

External Data

Loading all results from an external JSON endpoint but using the built in filtering. 

  • ts.ui.get('#myadvancedautocomplete', autocomplete => {
	$.getJSON('assets/autocomplete.json', function(json) {
		autocomplete.data(json);
	});
});

Advanced Usage

It's possible to override the filtering functionality to supply the user with any data you'd like. 

  • ts.ui.get('#myfancyautocomplete', autocomplete => {
	autocomplete.onfilter(function(filter) {
		var output = [];
		for (var i = parseInt(Math.random() * 10 + 1, 10); i >= 0; i--) {
			output.push({
				key: i,
				value: Math.random().toString(36).substr(2, 5)
			});
		}
		return output;
	});
});

Overriding onselect

onselect can be overridden to run your own code when an element is selected (either with the keyboard or the mouse). 

  • ts.ui.get('#myspecialautocomplete', autocomplete => {
	autocomplete.data([
		{ key: 0, value: 'zero' },
		{ key: 1, value: 'one' }
	]);
	autocomplete.onselect(function(item) {
		ts.ui.Notification.success('"' + item.value + '" selected');
		return item.value;
	});
});