select2 智慧補全模糊查詢select2的下拉選擇框使用

做你的貓發表於2018-11-22

　　

我們在上篇文章中已經在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
版權宣告：本文為博主原創文章，轉載請附上博文連結！

 1 <%@ include file="./include/header.jsp"%>
 2  
 3  
 4         <div id="page-wrapper">
 5             <div id="page-inner">
 6  
 7  
 8                 <div class="row">
 9                     <div class="col-md-12">
10                         <h1 class="page-header">
11                             Select2 <small>下拉框</small>
12                         </h1>
13                     </div>
14                 </div>
15                 <!-- /. ROW  -->
16  
17      <form class="form-horizontal" id="navigation">
18                  <div class="form-group">
19                         <label for="sourceId" class="col-sm-2 control-label">選擇框:</label>
20                     <div class="col-sm-8 input-group">
21                         <select class="form-control" id="type" name="type">
22                             <option value="" data-name="">- 籃球 -</option>
23                             <option value="" data-name="">- 足球 -</option>
24                             <option value="" data-name="">- 游泳 -</option>
25                         </select>
26                     </div>
27                 </div>
28              
29            </form>  
30                 <!-- /. ROW  -->
31             </div>
32             <!-- /. PAGE INNER  -->
33         </div>
34         <!-- /. PAGE WRAPPER  -->
35  
36     
37         
38  <%@ include file="./include/footer.jsp"%>
39  
40  
41 </body>
42  
43 </html>

效果如圖:

原生的select對少量的選項來說是足夠使用的。但是當我們的選項有很多時，比如幾十個選項。則需要使用select2。

select2實現了智慧補全，模糊查詢。也就是我們在select2中輸入某個字就能找到相應的選項。

 

首先

需要把select2外掛的程式碼放入專案中。

外掛下載:

select2外掛資源

select2需要載入css和js資源:

1 <link rel="stylesheet" href="/plugins/select2/dist/css/select2-site.css"
2       type="text/css"></link>
3  
4  
5 <script src="/plugins/select2/dist/js/select2.min.js"></script>

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

1 1 <script type="text/javascript">
2 2     $(document).ready(function () {
3 3       $('#type').select2();
4 4  
5 5     });
6 6  
7 7 </script>

這樣下拉框就支援智慧補全和模糊查詢了。

修改後的index.jsp程式碼如下:

 1 <%@ include file="./include/header.jsp"%>
 2  
 3  
 4 <link rel="stylesheet" href="/plugins/select2/dist/css/select2-site.css"
 5       type="text/css"></link>
 6  
 7         <div id="page-wrapper">
 8             <div id="page-inner">
 9  
10  
11                 <div class="row">
12                     <div class="col-md-12">
13                         <h1 class="page-header">
14                             Select2 <small>下拉框</small>
15                         </h1>
16                     </div>
17                 </div>
18                 <!-- /. ROW  -->
19  
20      <form class="form-horizontal" id="navigation">
21                  <div class="form-group">
22                         <label for="sourceId" class="col-sm-2 control-label">選擇框:</label>
23                     <div class="col-sm-8 input-group">
24                         <select class="form-control" id="type" name="type">
25                             <option value="" data-name="">- 籃球 -</option>
26                             <option value="" data-name="">- 足球 -</option>
27                             <option value="" data-name="">- 游泳 -</option>
28                         </select>
29                     </div>
30                 </div>
31              
32            </form>  
33                 <!-- /. ROW  -->
34             </div>
35             <!-- /. PAGE INNER  -->
36         </div>
37         <!-- /. PAGE WRAPPER  -->
38  
39     
40  
41         
42         
43  
44  
45  <%@ include file="./include/footer.jsp"%>
46 <script src="/plugins/select2/dist/js/select2.min.js"></script>
47  
48 <script type="text/javascript">
49     $(document).ready(function () {
50       $('#type').select2();
51  
52     });
53  
54 </script>
55  
56  
57 </body>
58  
59 </html>

效果如圖:

相關文章