select2 VS typeahead.js

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.

You can check out something like this: https://github.com/twitter/typeahead.js

If you have access to, or are able to create, a JSON output listing the pieces of each dataset you'd like to be searchable, as well as an image, title, and URL for each, then you can incorporate a platform-agnostic search tool with advanced features such as Twitter's Bloodhound.