Slim Select VS tom-select

A select dropdown written in javascript for those who need a bit more from a dropdown. https://github.com/brianvoe/slim-select

So we have been using SlimSelect for our multi-select library but the problem with slim select is that it doesn't preserve orders for selection.

This project uses Tom Select, which is licensed under the Apache License, Version 2.0. Tom Select on GitHub Apache License 2.0

Tip: If you're displaying a long list of timezones, consider using a select element with a search feature(e.g, tom-select) for a better user experience.

sorry if it's a dumb question. I'm using tom-select.js (https://tom-select.js.org/) to create various (s) that can use an ajax API call to retrieve/search for options. Since I have to use my own APIs that need an api key, is there a way to protect this key that could be used to access other APIs as well? Thank you

import { Controller } from "@hotwired/stimulus" import { get } from '@rails/request.js' import TomSelect from "tom-select" // Connects to data-controller="search" export default class extends Controller { static values = { url: String, selected: String } connect() { this.element.setAttribute( "autocomplete", "off" ); if (this.selectedValue == 'null') { var selected_json_data = new Array() var selected_items_array = new Array(); } else { var selected_json_data = JSON.parse(this.selectedValue) var selected_items_array = new Array() for(let i = 0; i < selected_json_data.length; i++) { selected_items_array.push(selected_json_data[i].id) } } var config = { plugins: ['clear_button', 'remove_button'], shouldLoad:function(q){ return q.length > 2; }, render: { option: this.render_option, //item: this.render_option item: function(data, escape) { return `${escape(data.email_address)}` } }, loadThrottle: 300, // check this out in search items reload new data-> // https://github.com/orchidjs/tom-select/issues/78 // https://stackoverflow.com/questions/74622800/fetching-data-from-api-to-create-tom-select-options maxItems: 10, maxOptions: 10, valueField: 'id', labelField: 'email_address', searchField: ['email_address', 'first_name', 'last_name'], options: selected_json_data, items: selected_items_array, sortField: { field: "email_address", direction: "asc" }, create: false, load: (q, callback) => this.search(q, callback), } let this_tom_select = new TomSelect(this.element, config) this_tom_select.clearCache() } async search(q, callback) { const response = await get(this.urlValue, { query: { q: q }, responseKind: 'json' }) if(response.ok) { callback(await response.json) } else { callback() } } render_option(data, escape) { if(data.email_address) return ` ${escape(data.first_name)} ${escape(data.last_name)} | ${escape(data.email_address)}