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