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