Bootstrap the dropdown box in the frame Select search function _javascript skills

Before using the Easyui frame to do the dropdown box selection, although you can search, but there are a lot of inconvenience: for example, can not be fuzzy matching, you must follow the first letter to search

Whim, want to change the framework to write backstage, and then use bootstrap build a shelf, and then two styles of conflict, Baidu A, found another good based on the Bootstrap dropdown box search function js

case-insensitive, fuzzy matching, haha, great ~ ~

Specific usage:

<script type= "Text/javascript" src= "<%=basepath%>/js/commons/jquery.min.js" ></script>
< Script type= "Text/javascript" src= "${basepath}/js/silviomoreto-bootstrap/bootstrap-select.js" ></script>
<link rel= "stylesheet" type= "Text/css" href= "${basepath}/js/silviomoreto-bootstrap/bootstrap-select.css" >

<!--3.0-->
<link href= "${basepath}/js/silviomoreto-bootstrap/bootstrap.min.css" rel= " Stylesheet ">
<script src=" ${basepath}/js/silviomoreto-bootstrap/bootstrap.min.js "></script> Initialize:
 
$ (window). On (' Load ', function () {

 $ ('. Selectpicker '). Selectpicker ({
 ' selectedtext ': ' Cat
 ') });

 $ ('. Selectpicker '). Selectpicker (' hide ');
}; 

The key code is class and whether the search is supported later

 <select id= "Bs3select" class= "Selectpicker show-tick form-control" multiple data-live-search= "true" >
  < option>cow</option>
  <option>bull</option>
  <option class= "Get-class" disabled> Ox</option>
  
  </select>

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.