Virtual Scroll

new TomSelect('#reddit-search',{
valueField: 'permalink',
labelField: 'title',
searchField: ['title'],
maxOptions: 200,

// fetch remote data
firstUrl: function(query){
return '' + encodeURIComponent(query);
load: function(query, callback) {

// retrieve the appropriate url
const url = this.getUrl(query);

.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( ){
const next_url = '' + encodeURIComponent(query)+'&after=';
this.setNextUrl(query, next_url);

// add data to the results
let data = =>;


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
(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
The shouldLoadMore() method determines if additinal results should be loaded based on the dropdown scroll position.
Type: callback Default: callback
The max number of options to display in the dropdown.
Type: int Default: 50
Renders a message at the bottom of the dropdown to communicate to users that more results are being loaded
Type: callback Default:
return `<div class="loading-more-results">Loading more results ... </div>`;
Renders a message at the bottom of the dropdown for communicating that users have reached the end of the results
Type: callback Default:
return `<div class="no-more-results">No more results</div>`;

Plugin Configuration

No additional configuration settings for this plugin

Available Plugins