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 ? :)

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

Ok, it was what I thought. I hope to have this feature in a near future now. ;)

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).

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'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.

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>"));