Virtual Scroll
new TomSelect('#reddit-search',{
valueField: 'permalink',
labelField: 'title',
searchField: ['title'],
plugins:['virtual_scroll'],
maxOptions: 200,
// fetch remote data
firstUrl: function(query){
return 'https://api.reddit.com/search?q=' + encodeURIComponent(query);
},
load: function(query, callback) {
// retrieve the appropriate url
const url = this.getUrl(query);
fetch(url)
.then(response => response.json())
.then(json => {
// prepare the next url that will be loaded when the dropdown is scrolled to the bottom
// important! should set before invoking callback()
if( json.data.after ){
const next_url = 'https://api.reddit.com/search?q=' + encodeURIComponent(query)+'&after='+json.data.after;
this.setNextUrl(query, next_url);
}
// add data to the results
let data = json.data.children.map(row => row.data);
callback(data);
}).catch((e)=>{
callback();
});
},
render: {
loading_more: function(data, escape) {
return `<div class="loading-more-results py-2 d-flex align-items-center"><div class="spinner"></div> Loading more results from reddit </div>`;
}
},
});<input type="text" id="reddit-search" placeholder="Search reddit" autocomplete="off">Related Tom Select Settings
| Setting | Description |
|---|---|
firstUrl |
(Required)
The firstUrl() method works along with getUrl() and setNextUrl() to supply your load() method with pagination friendly urls.
Type:
callback
Default:
null
|
shouldLoadMore |
The shouldLoadMore() method determines if additinal results should be loaded based on the dropdown scroll position.
Type:
callback
Default:
callback
|
maxOptions |
The max number of options to display in the dropdown.
Type:
int
Default:
50
|
render.loading_more |
Renders a message at the bottom of the dropdown to communicate to users that more results are being loaded
Type:
callback
Default:
|
render.no_more_results |
Renders a message at the bottom of the dropdown for communicating that users have reached the end of the results
Type:
callback
Default:
|
Plugin Configuration
No additional configuration settings for this plugin