selectize.js
Selectize is the hybrid of a textbox and <select> box. It's jQuery based, and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc.
Selectize is a jQuery UI control that replaces plain HTML dropdowns with a searchable, taggable input where users can pick from a list or create new entries, with Bootstrap themes and a plugin API.
Selectize is a JavaScript UI control that combines a plain text input with a dropdown selector. Built on top of jQuery, it lets users pick items from a list while also being able to type, search, and create new entries on the fly. Common uses include tagging systems, contact pickers, and country selectors on web forms.
The control includes a few practical features beyond what a standard HTML select element offers. Search is scored and ranked in real time so that the most relevant options float to the top as the user types. Keyboard navigation works the way most people expect: arrow keys move between selected items, and holding a modifier key lets you select multiple entries at once to delete them in one go. It also handles international characters, supports touch devices, and can fetch options from a server as the user types, which is useful when the full list is too large to load upfront.
Styling comes with themes that match Bootstrap versions 2 through 5, and the source files are available in both Sass and Less for projects that need further customization. The default theme is a single CSS file included in the pre-built distribution folder.
Installation is done through npm with the package name @selectize/selectize, or by manually copying the compiled files from the dist folder into a project. jQuery is a required dependency that must be installed separately. A plugin API built on microplugin is available for adding custom behavior without modifying the core code.
The project is maintained by a community team and is licensed under the Apache License 2.0. As of the README, the team was actively looking for additional contributors to help with ongoing maintenance.
Where it fits
- Replace a plain HTML select element with a searchable, keyboard-navigable dropdown that ranks results as the user types.
- Build a tagging input where users can pick existing tags or type to create new ones on the fly.
- Add a contact or country picker that loads options from a server API as the user types.
- Style the control with a pre-built Bootstrap 5 theme or customize it further using Sass source files.