Bootstrap-select Live-search

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