select2 VS bootstrap-select

Most people using react aren't building SPAs. Vue/React can be used the same way as jquery, which is to add enhanced UI functionality that server-side HTML views simply can't offer.

The best example is a multi-select box, or a searchable select box with autocomplete (what W3 calls the combobox pattern https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) which in jquery was usually via https://select2.org/

For example, on my company website there's a timezone select box with are 151 options. Asking a user to simply scroll through 100+ to find theirs is annoying vs typing a few characters and hitting enter.

There's many examples of select boxes like that and there really is no static server-side way to solve this problem (I tried hard to think of one)... without creating a multi-page Wizard for what should be a single field on a larger form.

If you're building a SaaS product there are many highly-interactive components that demand JS and there's really no better mainstream solution atm than static-first sites with small "islands" of Vue/React style components (ideally with hydration) where interactivity is required.

People still abuse React/Vue of course, but the trend is 100% moving back to "mostly static" rather than slow SPAs and IMO JS-powered components are not never going away unless browsers start offering these complex components built-in.

I’m a fan of select2 (https://select2.org), it supports loading in data from a foreign source (API)

You could use a Select2() for the records which prevent the massive amount of data being transferred.

Sometimes I still import it for only one thing : select2 that depends on it. Does anyone have an alternative ? I'd love it

The traditional solution was to use ModelAdmin.raw_id_fields, a comma-delimited string of IDs in a text input. Many users found the interaction inelegant, and so ModelAdmin.autocomplete_fields with live search integration with Select2 was added in Django 2.0.

The module django-extensions has a searchable select box widget. There are others using Select2 as well.

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