BootStrap實現帶搜索的下拉框

前段時間在做一個小項目的時候，因爲項目需求需要選擇ip,然後就寫成簡單的Select下拉框進行選擇，由於ip太多網段太亂

公司人就說能不能實現一個帶有搜索的下拉框，然後我通過學習發現BootStrap已經完美的實現了這個功能。

我先看下倆次實現的效果

1.這個是bootstrap的簡單下拉框看着那麼多的ip小夥伴們是不是也眼花繚亂了。

2.下面是使用了帶有搜索的下拉框,倆個比較一下還是下面那個比較方便吧，下面我們進入正題。

第一步：下載和引入BootStrap的必要css和js文件引入頁面。

              bootstrap select下載地址 http://www.bootcdn.cn/bootstrap-select/

               引入必要的css和js文件,注意jquery一定要在bootstrap.min.js上面。

               <link href="<%=request.getContextPath()%>/bootstrap/css/bootstrap.min.css" rel="stylesheet">

               <link href="<%=request.getContextPath()%>/bootstrap/css/bootstrap-select.css" rel="stylesheet">

               <script src="<%=request.getContextPath()%>/bootstrap/js/jquery-1.11.min.js"></script>

               <script src="<%=request.getContextPath()%>/bootstrap/js/bootstrap.min.js"></script>

第二步：寫一個jsp頁面實現一個select框和寫一個js方法，這樣一個簡單的帶有搜索功能的下拉框就完成了.

              $(window).on('load', function () {  
                $('.selectpicker').selectpicker({  
                    'selectedText': 'cat'
                });  
                // $('.selectpicker').selectpicker('hide');  
               });  

            <label for="id_select">下拉框:</label>
                <select id="id_select" class="selectpicker bla bla bli" multiple data-live-search="true">
                    <option>123</option>
                    <option>456</option>
                    <option selected>789</option>
                    </optgroup>
                  </select>

如果覺得可以請留下你們的贊！謝謝