I’m trying to build a tag selection component similar to what you see in email clients. Looking for the simplest way to create this kind of interface.
Key features I need:
Single click on any tag applies it instantly to the selected item
Option to select multiple tags at once with a confirmation button
Search functionality to filter through available tags by typing
Auto-apply when search results show only one matching tag and user hits enter
Keyboard shortcut activation (thinking ‘L’ key)
Are there any existing JavaScript frameworks or libraries that already have this type of component built in? I’d rather use something that’s already tested than build it from scratch if possible.
The main challenge seems to be handling both the instant single-tag application and the multi-tag selection modes in the same interface without making it confusing for users.
For what you’re describing, check out Choices.js or Tom Select. Both nail the search and keyboard navigation right out of the box. The dual mode UX is the tricky bit - I ditched modifier keys (users never notice them) and added a small toggle button for instant vs batch mode instead. In batch mode, I give selected tags a different look until they’re confirmed. Keyboard shortcuts are easy with a document event listener, just make sure you’re not focused on input fields first. Tom Select’s great for auto-apply since it has solid hooks when filtered results change. One thing that bit me: keep search focused after applying tags in instant mode, or the whole flow feels janky.
I built something almost identical with React Select and some custom tweaks. The dual-mode thing you want is pretty easy once you get the event handlers right. I went with modifier keys - regular clicks apply right away, but Ctrl or Shift switches to multi-select with a confirm popup. For the ‘L’ shortcut, just throw a global listener that focuses the search box when someone hits ‘L’. The auto-apply on single results? Watch your filtered options array and trigger selection when they hit Enter. Most tag libraries already handle search filtering, so don’t reinvent it. Just make sure users can tell which mode they’re in.
select2 is a good fit! its got search and multi-select down well. just customize for instant apply needs. tagify is also worth checking out, super lightweight and made for tags specifically. good luck!