Topic: Bootstrap-select Live-search

Marcos Queiroz free asked 10 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 8 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 10 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