select2 智能补全模糊查询select2的下拉选择框使用

　　

我们在上篇文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录select2的使用。

应用bootstrap模板

基础项目源码下载地址为:

SpringMVC+Shiro+MongoDB+BootStrap基础框架

我们在基础项目中已经做好了首页index的访问。

现在就在index.jsp页面上做修改，实现select2的下拉选择框。

select2实现

首先我们来实现select的下拉选择框

index.jsp的代码如下:
---------------------
作者：张小凡vip
来源：CSDN
原文：https://blog.csdn.net/zzq900503/article/details/72382241
版权声明：本文为博主原创文章，转载请附上博文链接！

 <%@ include file="./include/header.jsp"%>

         <div id="page-wrapper">
             <div id="page-inner">

                 <div class="row">
                     <div class="col-md-12">
                         <h1 class="page-header">
                             Select2 <small>下拉框</small>
                         </h1>
                     </div>
                 </div>
                 <!-- /. ROW  -->

      <form class="form-horizontal" id="navigation">
                  <div class="form-group">
                         <label for="sourceId" class="col-sm-2 control-label">选择框:</label>
                     <div class="col-sm-8 input-group">
                         <select class="form-control" id="type" name="type">
                             <option value="" data-name="">- 篮球 -</option>
                             <option value="" data-name="">- 足球 -</option>
                             <option value="" data-name="">- 游泳 -</option>
                         </select>
                     </div>
                 </div>

            </form>
                 <!-- /. ROW  -->
             </div>
             <!-- /. PAGE INNER  -->
         </div>
         <!-- /. PAGE WRAPPER  -->

  <%@ include file="./include/footer.jsp"%>

 </body>

 </html>

效果如图:

原生的select对少量的选项来说是足够使用的。但是当我们的选项有很多时，比如几十个选项。则需要使用select2。

select2实现了智能补全，模糊查询。也就是我们在select2中输入某个字就能找到相应的选项。

首先

需要把select2插件的代码放入项目中。

插件下载:

select2插件资源

select2需要加载css和js资源:

 <link rel="stylesheet" href="/plugins/select2/dist/css/select2-site.css"
       type="text/css"></link>

 <script src="/plugins/select2/dist/js/select2.min.js"></script>

然后在js中把select初始化成select2,type是select的id:

  <script type="text/javascript">
      $(document).ready(function () {
        $('#type').select2();

      });

  </script>

这样下拉框就支持智能补全和模糊查询了。

修改后的index.jsp代码如下:

 <%@ include file="./include/header.jsp"%>

 <link rel="stylesheet" href="/plugins/select2/dist/css/select2-site.css"
       type="text/css"></link>

         <div id="page-wrapper">
             <div id="page-inner">

                 <div class="row">
                     <div class="col-md-12">
                         <h1 class="page-header">
                             Select2 <small>下拉框</small>
                         </h1>
                     </div>
                 </div>
                 <!-- /. ROW  -->

      <form class="form-horizontal" id="navigation">
                  <div class="form-group">
                         <label for="sourceId" class="col-sm-2 control-label">选择框:</label>
                     <div class="col-sm-8 input-group">
                         <select class="form-control" id="type" name="type">
                             <option value="" data-name="">- 篮球 -</option>
                             <option value="" data-name="">- 足球 -</option>
                             <option value="" data-name="">- 游泳 -</option>
                         </select>
                     </div>
                 </div>

            </form>
                 <!-- /. ROW  -->
             </div>
             <!-- /. PAGE INNER  -->
         </div>
         <!-- /. PAGE WRAPPER  -->

  <%@ include file="./include/footer.jsp"%>
 <script src="/plugins/select2/dist/js/select2.min.js"></script>

 <script type="text/javascript">
     $(document).ready(function () {
       $('#type').select2();

     });

 </script>

 </body>

 </html>

效果如图: