Select with search box with standard Bootstrap select?


Topic: Select with search box with standard Bootstrap select?

jouvrard pro asked 6 years ago

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


Sebastian Kaczmarek staff pro premium answered 6 years ago

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.


Bartłomiej Malanowski staff pro premium answered 6 years ago

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

jouvrard pro answered 6 years ago

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


jouvrard pro answered 6 years ago

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(); });


Bartłomiej Malanowski staff pro premium commented 6 years ago

Do you import mdb.js or mdb.min.js?


jouvrard pro answered 6 years ago

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


jouvrard pro answered 6 years ago

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


jouvrard pro answered 6 years ago

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.


jouvrard pro answered 6 years ago

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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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