Topic: Bootstrap-select Live-search

Marcos Queiroz free asked 6 years ago

Add support for Pesquina in the selection field. as in the following examples

gigm pro answered 4 years ago

Hi you need the bootstrap-select to work and allow you to live search right? , no problem Just add


<linkrel="stylesheet"href="" />


<!-- Latest compiled and minified JavaScript -->
<script src=""></script>
<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="*.min.js"></script>

Now thats done, a little css/html hack to make it all work

In html declare your select like this

<labelfor="sel2">Travelling To</label>
<selectclass="selectpicker "id="sel2"data-show-subtext="true"data-live-search="true">
<optiondata-subtext="Rep California">Tom Foolery</option>
<optiondata-subtext="Sen California">Bill Gordon</option>
<optiondata-subtext="Sen Massacusetts">Elizabeth Warren</option>
<optiondata-subtext="Rep Alabama">Mario Flores</option>
<optiondata-subtext="Rep Alaska">Don Young</option>
<optiondata-subtext="Rep California"disabled="disabled">Marvin Martinez</option>

now add the following css > .dropdown-menu > .dropdown-menu {
display: block;
.bootstrap-select > .dropdown-menu > .dropdown-menu li.hidden {
display: none;
.bootstrap-select > .dropdown-menu > .dropdown-menu li a {
display: block;
width: 100%;
padding: 3px1.5rem;
clear: both;
font-weight: 400;
color: #292b2c;
text-align: inherit;
white-space: nowrap;
background: 00;
border: 0;
.bootstrap-select > .btn {
width: 100%!important;
padding-right: 25px;
padding-bottom: 0;
.dropdown-toggle.btn-default {
color: #292b2c;
background-color: #ffffff;
border-color: #cccccc;
.dropdown-toggle::after {
display: inline;
width: 2px;
height: 2px;
margin-top: -5%!important;
margin-left: 94%;
vertical-align: -0.05em;
content: "";
border-top: .7emsolid;
border-right: .4emsolidtransparent;
border-left: .4emsolidtransparent;
.bootstrap-select.btn-group .btn .filter-option {
display: inline-block;
overflow: hidden;
width: 100%;
padding-top: 2%;
line-height: 1;
box-sizing: border-box;
text-align: left;
.light-blue-skin .btn-default.dropdown-toggle {
background-color: #ffffff!important;
color: #292b2c!important;
box-shadow: none;
border-bottom: 1pxsolid#bdbdbd;
padding: 0;
.light-blue-skin .btn-default.dropdown-toggle:focus {
color: #292b2c!important;
width: 100%!important;
background-color: #ffffff!important;
outline: none!important;
.light-blue-skin .btn-default.dropdown-toggle:hover {
color: #292b2c!important;
width: 100%!important;
background-color: #ffffff!important;
outline: none!important;
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
width: 100%!important;

You should be all good now

Dawid Adach pro answered 6 years ago

Dear Marcos, Thanks for your message, we will check that and come back to you as soon as possible.

Benny Bottema pro commented 4 years ago

So what's the result, I still don't see it in the Angular library. Even the browser native select is more useful, since pressing the letter 'n' brings me to Netherlands, instantly when selecting a country. With MDB's select no such feature unfortunately.

Please insert min. 20 characters.


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



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No