twbs
MultiSelect For Bootstrap 5 similar to select 2 (Floating Labels, Ajax, Data source, Pagination)
Prerequisites
- [X] I have searched for duplicate or closed feature requests
- [X] I have read the contributing guidelines
Proposal
Dear development team,
I'm writing to request a new feature for Bootstrap 5: a MultiSelect component similar to Select2. While there are some third-party libraries available, it would be great to have a multi select component built directly into Bootstrap, as it would ensure consistency with the rest of the framework and simplify development for those of us who are already using Bootstrap.
Specifically, I'd love to see a MultiSelect component that includes the following features:
Floating Labels: the ability to use floating labels for the input field, as well as support for different label positions (e.g. above, below, inside). Ajax Support: the ability to load options asynchronously via AJAX, with support for pagination and custom filtering. Data Source: the ability to use a data source (e.g. an array or JSON object) to populate the options, with support for nested data structures and custom templates for the options. Pagination: the ability to paginate through large data sets, with support for both server-side and client-side pagination. I believe that a MultiSelect component with these features would be a valuable addition to the Bootstrap framework, and would be a popular choice for developers who are looking for a flexible and powerful way to handle multiple selections in their forms.
Thank you for considering my request, and please let me know if you have any questions or need any additional information.
Best regards,
Owais.multi select
Motivation and context
I'm writing to request a new feature for Bootstrap 5: a MultiSelect component similar to Select2. While there are some third-party libraries available, it would be great to have a multi-select component built directly into Bootstrap, as it would ensure consistency with the rest of the framework and simplify development for those of us who are already using Bootstrap.
Also, it would be greatly appreciated if bootstrap could enable Search Results Feature for Single & Multi Select Dropdowns.
+Icons Support i.e country flags or icons supplied via data attributes or alongside data/JSON for ajax based)
For anyone who is using Select 2 and looking for Bootstrap UI can use: (apalfrey/select2-bootstrap-5-theme)
https://github.com/apalfrey/select2-bootstrap-5-theme/
Hi @tyrex1975, Thank you for your input. However, I would like to mention that the widget is built using jQuery, and in some projects, we do not load jQuery. Additionally, I noticed that the widget uses fixed selectors, which means that it cannot be reused and is fixed to specific elements and selectors. When developing a jQuery plugin, it is considered a best practice to make it reusable to more elements, and chainable by returning $this variable in the end.
I assume you read my full message 'quick and dirty' and 'use at your own risk', but thanks for the unsolicited lesson in software dev all the same. I thought I'd post as it might help some shortcut their work, but obviously not you, perhaps you'd like everything done for you so you don't have to code at all. 🙄 Anyway, I've remove it now, to save you from having to look at my crappy code.
Hi @tyrex1975, Thank you for that and I really appreciate that you are helping me and other members here. I added my note as most of the developers may just copy and paste snippets and suppose the code would work exactly as they required, It was just a reminder, that they need to modify the code to make it work as selectors are defined within the plugin, so if they try to call out the plugin on different selectors outside the plugin, it won't work and they need to change this inside the plugin.
Of course, The code you provided was good, We cannot say it a crap really, That was just a comment consisting of a piece of code to help the members how they can achieve that, My note was just for other people and anyone who can repost a non-jquery version of that to help people who are looking for jquery-free version.
Happy Coding :)
@owaisahmed5300 you can give a try to https://github.com/lekoala/bootstrap5-tags :-)
For a vanilla JS alternative of Select2, you may be interested in Tom Select. https://tom-select.js.org/plugins/dropdown-input/
In the future, I think Bootstrap could offer this by default once <selectmenu> becomes standardised.
- https://developer.chrome.com/blog/whats-new-css-ui-2023/#selectmenu - Explanation
- https://microsoftedge.github.io/Demos/selectmenu/ - Demo on Chromium
- https://open-ui.org/prototypes/selectmenu/
I've made something similar
https://github.com/AlizHarb/bootstrap-multiselect
