Customizing

Nearly every piece of Tom Select is customizable. Render templates allow you to customize the HTML of rendered options, items, dropdown menu, optgroups and more.

Custom Option and Item HTML

This example provides a simple demonstration of how to override the default templates for options and items along with proper use of the escape() method.

new TomSelect('#select-links',{
	valueField: 'id',
	searchField: 'title',
	options: [
		{id: 1, title: 'DIY', url: 'https://diy.org'},
		{id: 2, title: 'Google', url: 'http://google.com'},
		{id: 3, title: 'Yahoo', url: 'http://yahoo.com'},
	],
	render: {
		option: function(data, escape) {
			return '<div>' +
					'<span class="title">' + escape(data.title) + '</span>' +
					'<span class="url">' + escape(data.url) + '</span>' +
				'</div>';
		},
		item: function(data, escape) {
			return '<div title="' + escape(data.url) + '">' + escape(data.title) + '</div>';
		}
	}
});

<select id="select-links" multiple placeholder="Pick some links..."></select>

.ts-wrapper .option .title {
	display: block;
}
.ts-wrapper .option .url {
	font-size: 12px;
	display: block;
	color: #a0a0a0;
}

Custom JavaScript

There are a number of ways to customize the JavaScript functionality. Plugins are a great example but sometimes you just want to add some functionality to items or options. The example below shows how to add a clickable button within an option but the same concept can be applied to items.

new TomSelect('#custom_js',{
	create: true,
	render:{
		option: function(data) {

			const div = document.createElement('div');
			div.className = 'd-flex align-items-center';

			const span = document.createElement('span');
			span.className = 'flex-grow-1';
			span.innerText = data.text;
			div.append(span);

			const a = document.createElement('a');
			a.innerText = '#';
			a.className = 'btn btn-sm btn-light';
			div.append(a);
			a.addEventListener('click',function(evt){
				evt.stopPropagation();
				alert(`You clicked # within the "${data.text}" option`);
			});

			return div;
		},
	}
});

<select id="custom_js" multiple>
	<option value="">How cool is this?</option>
	<option selected>amazing</option>
	<option selected>awesome</option>
	<option>cool</option>
	<option>excellent</option>
	<option>great</option>
	<option>neat</option>
	<option>superb</option>
	<option>wonderful</option></select>

.ts-wrapper .option .title {
	display: block;
}
.ts-wrapper .option .url {
	font-size: 12px;
	display: block;
	color: #a0a0a0;
}