Remote Data Examples
We use JavaScript's native Fetch API in this example to retrieve remote data from GitHub
new TomSelect('#select-repo',{
valueField: 'url',
labelField: 'name',
searchField: 'name',
// fetch remote data
load: function(query, callback) {
var url = 'https://api.github.com/search/repositories?q=' + encodeURIComponent(query);
fetch(url)
.then(response => response.json())
.then(json => {
callback(json.items);
}).catch(()=>{
callback();
});
},
// custom rendering functions for options and items
render: {
option: function(item, escape) {
return `<div class="py-2 d-flex">
<div class="icon me-3">
<img class="img-fluid" src="${item.owner.avatar_url}" />
</div>
<div>
<div class="mb-1">
<span class="h4">
${ escape(item.name) }
</span>
<span class="text-muted">by ${ escape(item.owner.login) }</span>
</div>
<div class="description">${ escape(item.description) }</div>
</div>
</div>`;
},
item: function(item, escape) {
return `<div class="py-2 d-flex">
<div class="icon me-3">
<img class="img-fluid" src="${item.owner.avatar_url}" />
</div>
<div>
<div class="mb-1">
<span class="h4">
${ escape(item.name) }
</span>
<span class="text-muted">by ${ escape(item.owner.login) }</span>
</div>
<div class="description">${ escape(item.description) }</div>
</div>
</div>`;
}
},
});<select id="select-repo" placeholder="Pick a repository..." multiple></select>.icon{
width: 3rem;
}
.item{
width: 100%;
}Load a list of web technologies once
new TomSelect('#select-state',{
valueField: 'label',
labelField: 'label',
searchField: ['label','type'],
// fetch remote data
load: function(query, callback) {
var self = this;
if( self.loading > 1 ){
callback();
return;
}
var url = 'https://whatcms.org/API/List';
fetch(url)
.then(response => response.json())
.then(json => {
callback(json.result.list);
self.settings.load = null;
}).catch(()=>{
callback();
});
},
// custom rendering function for options
render: {
option: function(item, escape) {
return `<div class="py-2 d-flex">
<div class="mb-1">
<span class="h5">
${ escape(item.label) }
</span>
</div>
<div class="ms-auto">${ escape(item.type.join(', ')) }</div>
</div>`;
}
},
});<select id="select-state" placeholder="Software: WordPress, Apache ..." multiple></select>.icon{
width: 3rem;
}// a small plugin to prevent results from closing
TomSelect.define('no_close',function(){
this.close = function(){};
});
new TomSelect('#select-repo2',{
valueField: 'url',
labelField: 'name',
searchField: ['name','description'],
options: [],
create: false,
maxOptions: 10,
dropdownParent: '#select-repo-inline',
plugins:['no_close'],
// minimum query length
shouldLoad:function(query){
return query.length > 1;
},
// custom scoring
score: function(search) {
var score = this.getScoreFunction(search);
return function(item) {
return score(item) * (1 + Math.min(item.watchers / 100, 1));
};
},
// fetch remote data
load: function(query, callback) {
var url = 'https://api.github.com/search/repositories?q=' + encodeURIComponent(query);
fetch(url)
.then(response => response.json())
.then(json => {
callback(json.items);
}).catch(()=>{
callback();
});
},
// custom rendering functions for options and items
render: {
option: function(item, escape) {
return `<div class="row border-bottom py-2">
<div class="col-md-1">
<img class="img-fluid" src="${item.owner.avatar_url}" />
</div>
<div class="col-md-11">
<div class="mt-0">${escape(item.name)}
<span class="small text-muted">by ${escape(item.owner.login)}</span>
</div>
<div class="mb-1">${escape(item.description)}</div>
<div class="d-flex text-muted">
<div class="me-3"><i class="ib fa-code"></i> ${escape(item.language)}</div>
<div class="me-3"><i class="ib fa-flash"></i> ${escape(item.forks_count)} Forks</div>
<div class="me-3"><i class="ib fa-star"></i> ${escape(item.stargazers_count)} Stars</div>
<div class="me-3"><i class="ib fa-eye"></i> ${item.watchers_count} Watchers</div>
</div>
</div>
</div>`;
},
item: function(item, escape) {
return `<div class="py-2 d-flex">
<div class="icon me-3">
<img class="img-fluid" src="${item.owner.avatar_url}" />
</div>
<div>
<div class="mb-1">
<span class="h4">
${ escape(item.name) }
</span>
<span class="text-muted">by ${ escape(item.owner.login) }</span>
</div>
<div class="description">${ escape(item.description) }</div>
</div>
</div>`;
}
}
});<div id="select-repo-inline">
<select id="select-repo2" placeholder="Pick a repository..." multiple></select>
</div>#select-repo-inline .ts-dropdown {
position: relative !important;
top: 0 !important;
left: 0 !important;
width: auto !important;
box-shadow: none;
height: auto !important;
}
#select-repo-inline .ts-dropdown-content {
overflow: auto !important;
max-height: none !important;
}
#select-repo-inline .ts-control{
position: sticky;
top: 2rem;
z-index:2000;
}
#select-repo-inline .option{
margin: 0;
}
.icon{
width: 3rem;
}
.item{
width: 100%;
}