select下拉框之select2模糊查詢

這裡主要還是介紹select2插件的單選模糊查詢情況。

1、首先需要引入如下檔案 

[html]  view plain  copy

1. <link href="select2.min.css" rel="stylesheet" />  
2. <script type="text/javascript" src="jquery-2.1.4.min.js"></script>  
3. <script type="text/javascript" src="select2.min.js"></script>  

這裡要注意jQuery要放在select2的前面

2. html代碼

<select  class="select2" id="selectSearch">

<option value="">請選擇</option>

<option value="101">忠狗</option>

<option value="120">抱緊</option>

</select>

3. 調用方式

$(function() {

$(".select2").select2();

};

4.設定預設選中

$("#selectSearch").select2().val("101").trigger("change");

5. 動态加載js樣例

1. $(document).ready(function() {  
2.         $(".js-example-basic-single").select2(); //單選  
3.         $(".js-example-basic-multiple").select2(); //多選  
4.         $(".js-example-placeholder-single").select2({ //允許清除  
5.             placeholder: "Select a state", //預設提示語  
6.             allowClear: true  
7.         });  
8.         $(".js-example-placeholder-multiple").select2({  
9.             placeholder: "Select a state" //預設提示語  
10.         });  
11.         var data = [{  
12.             id: 0,  
13.             text: 'enhancement'  
14.         }, {  
15.             id: 1,  
16.             text: 'bug'  
17.         }, {  
18.             id: 2,  
19.             text: 'duplicate'  
20.         }, {  
21.             id: 3,  
22.             text: 'invalid'  
23.         }, {  
24.             id: 4,  
25.             text: 'wontfix'  
26.         }];  
27.         $(".js-example-data-array").select2({  
28.             data: data  
29.         })  
30.         $(".js-example-data-array-selected").select2({  
31.             data: data  
32.         })  
33.     });