Topic: Select with search box with standard Bootstrap select?
Hello,
I have a large form for which it's clearer to use the standard Bootstrap inputs instead of Material Select.
But I would like to have some select lists with a search box on the top, which seems possible to have only with Material Select. Is it possible to have it in a standard Bootstrap select input?
Thanks,
Jerome
I don't like to say that but currently, it is not possible to achieve what you asked for. We will consider adding such a feature in the future releases.
You can simply achieve this by replacing:
this.$searchInput = $("<span class=\"search-wrap ml-2\"><div class=\"md-form mt-0\"><input type=\"text\" class=\"search form-control w-100 d-block\" placeholder=\"".concat(placeholder, "\"></div></span>"));
With:
this.$searchInput = $("<span class=\"search-wrap ml-2\"><input type=\"text\" class=\"search form-control d-block\" placeholder=\"".concat(placeholder, "\"></span>"));
I'm sorry, but I don't see any javascript to add in this page https://mdbootstrap.com/docs/jquery/forms/select/, so, I don't understand where I have to replace the code.
Bartłomiej Malanowski staff pro premium commented 6 years ago
Sorry for being unclear. Please replace this line in your mdb.js file (or material-select.js if you're using modules instead of the full mdb.js)
jouvrard pro commented 6 years ago
Ok thank you.
It would be cool for a next MDB release to propose the search field for the standard Booststrap select and the Material one. :)
Sorry but I changed the code in mdb.js but nothing change in my page, I only can have a search field with a material select but not a "Booststrap" one. :(
<div class="form-group">
<label for="test">TEST</label>
<select class="browser-default custom-select" id="test" searchable="Search here..">
<option value="" disabled selected>Choose your country</option>
<option value="1">USA</option>
<option value="2">Germany</option>
<option value="3">France</option>
<option value="3">Poland</option>
<option value="3">Japan</option>
</select>
And this in the footer to try:
$(document).ready(function() {
$('.custom-select').materialSelect(); });
I import mdb.min.js but to try I changed to import mdb.js, where I changed the js Inside.
But I think I was not clear in my question.In fact I think the code you gave me is to have a "Boostrap" search field in a Material Design select input.
What I would like to have is to have a search field in a Boostrap select, a little like this: https://developer.snapappointments.com/bootstrap-select/examples/ The select field isn't exactly like a pure Bootstrap select but it's close.
(I tried to add this in my project but there are some problems, I think there are some incompatibilities with MDB).
Ok, it was what I thought. I hope to have this feature in a near future now. ;)
Piotr Glejzer staff commented 6 years ago
Hey, I'm working about select for now and I only want to ask. Do you want to have a bootstrap input instead of material input inside the list?
jouvrard pro commented 6 years ago
Yes exactly, a "Bootstrap select" with a "Bootstrap input" Inside, it will be perfect. :)
I juste saw the new 4.7.7 MDBootstrap version and I can see this: "We added a possibility to change material input to bootstrap input with the same possibilities"
Is it the solution for me? Because I Don't see any change in the "select" documentation.
Thanks,
Jerome
Piotr Glejzer staff commented 6 years ago
https://mdbootstrap.com/docs/jquery/forms/multiselect/#bs - there is an example. Idk why is not showing correctly at our website but if you will copy and paste it will show normally.
After a try, it's not exaclty what I'd like to have. :)
The search input is like Bootstrap standard, it's perfect, but what I'd like to have is a "Bootstrap select" too, not just the choices and the search box inside. I don't know if it's possible.
And an other thing: :)
- A label like de Material Select with search box to avoid having the first option for title ? :)
Piotr Glejzer staff commented 6 years ago
You can try to use :
$('#id').materialSelect({
BSsearchIn: true,
BSinputText: true,
});
For now label has own text not first option.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.7.4
- Device: All
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: No