Customizing HTML
Render items on your own & apply unique CSS styles.
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><a href="' + escape(data.url) + '">' + escape(data.title) + '</a></div>';
}
}
});<select id="select-links" multiple placeholder="Pick some links..."></select>.ts-control .option .title {
display: block;
}
.ts-control .option .url {
font-size: 12px;
display: block;
color: #a0a0a0;
}
.ts-control .item a {
color: #006ef5;
}
.ts-control .item.active a {
color: #303030;
}