How to handle the searching on the server

[awh-tokyo]

I would like the search to be handled by the server and for the dropdown to display exactly the items that are returned by the server.

Right now, the items returned by the load callback are added to the items in the dropdown, but it's still displaying old items that were not returned from the server this time around.

[oyejorge]

You could call clearOptions() before adding new options

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 => {
					this.clearOptions();
					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>`;
			}
		},
	});

[awh-tokyo]

Thanks, that seems to have done the trick!