網頁實例 http://www.jq22.com/yanshi302
使用bootstrap-select插件來實現下來菜單搜索匹配功能，如圖
實現代碼如下
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-select.min.css"> <script src="jquery-3.1.0.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="js/bootstrap-select.min.js"></script> </head> <body> <form class="form-inline"> <div class="form-group"> <label class="col-md-1 control-label" for="lunch">Lunch:</label> </div> <div class="form-group"> <select id="lunch" class="selectpicker" data-live-search="true" title="Please select a lunch ..."> <option>Hot Dog, Fries and a Soda</option> <option>Burger, Shake and a Smile</option> <option>Sugar, Spice and all things nice</option> <option>中國</option> <option>美國</option> <option>日本</option> <option>Baby Back Ribs</option> <option>A really really long option made to illustrate an issue with the live search in an inline form</option> </select> </div> </form> </body> </html>
步驟：
1.導入相關的js和css文件，可自行下載
bootstrap-select：http://silviomoreto.github.io/bootstrap-select/
bootstrap:http://v3.bootcss.com/
JQuery:http://jquery.com/
2.設置<select></select>的屬性
class="selectpicker" data-live-search="true"