tom-select VS bootstrap-select

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)}

I have a multiselect widget in a modal. Because the multiselect has dynamically generated values, I need to call $('select').selectpicker(); when the modal code is injected.

I want to replace the crispy-forms default bootstrap select with the bootstrap-select (https://developer.snapappointments.com/bootstrap-select/)

Our project uses bootstrap-select so you need to implement your solution with that plugin.

I'm trying to add Alpine to an existing project that uses bootstrap-select to create select boxes. I'm having issues triggering actions when a selection is made.

I am using the npm module bootstrap-select (https://www.npmjs.com/package/bootstrap-select) and I don't understand the instructions nor can i find anything online about dropdown.js.

Emphatic agreement.

Today, even apparently trivial widgets require ridiculous amounts of effort to attain a "natural" UX. To become so good you don't notice. That holy grail of being "invisible".

--

Epochs ago, I created custom controls for Win32. The one I was most proud of was a direct manipulation sundial picker for a raytracer. I obsessed over the details. Like being pixel perfect, both mouse and arrow keys (for fine grained increments), live updates between dial widget and text fields. Damn, I was proud of that control. I gushed and preened whenever a user complimented the effort.

Ages ago, I started using bootstrap-select. It's a nifty dropdown w/ type ahead (search). Modest, no big deal, right? Nope! That project received so many PRs, tweaks, fit & finish, finesse, and all around TLC. I was transfixed, fascinated. I haven't done UI for years, but remained subscribed to their project announcements, mostly out of awe and respect.

https://github.com/snapappointments/bootstrap-select

Observing the bootstrap-select project over time humbled me. I used to think I had some UX juice. Now I know that I'm just banging the rocks together.

I tried following this guide, and added the cdn and js available here, but I cant seem to get it working in my Google Apps Script Webapp. All I am getting is a dropdown with no option to serach.

The source: https://github.com/snapappointments/bootstrap-select