Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Bootstrap-select Live-search

Marcos Queiroz free asked 9 years ago


Add support for Pesquina in the selection field. as in the following examples http://codepen.io/Rio517/pen/NPLbpP http://jsfiddle.net/KyleMit/9abm0hhy/ https://silviomoreto.github.io/bootstrap-select/

gigm pro answered 7 years ago



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

css

<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" />

js

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-*.min.js"></script>

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

In html declare your select like this

<divclass="form-group">
<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>
</select>
</div>

now add the following css

.bootstrap-select.show > .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 9 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 7 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.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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