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>

如果觉得可以请留下你们的赞！谢谢