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">
Setting Description
firstUrl
(Required) The firstUrl() method works along with getUrl() and setNextUrl() to supply your load() method with pagination friendly urls.
  • firstUrl(query_string) should return the request url for the first `page` of data.
  • Call setNextUrl(query_string,next_url) in your load() method upon request completion to define subsequent request urls.
  • Use getUrl(query_string) to retrieve the appropriate pagination url for the given query string.
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:
function(data,escape){
return `<div class="loading-more-results">Loading more results ... </div>`;
}
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:
function(data,escape){
return `<div class="no-more-results">No more results</div>`;
}

Plugin Configuration

No additional configuration settings for this plugin

Available Plugins