select下拉框之select2模糊查询

这里主要还是介绍select2插件的单选模糊查询情况。

1、首先需要引入如下文件 

这里要注意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.   
5.         $(".js-example-placeholder-single").select2({ //允许清除  
6.             placeholder: "Select a state", //默认提示语  
7.             allowClear: true  
8.         });  
9.   
10.         $(".js-example-placeholder-multiple").select2({  
11.             placeholder: "Select a state" //默认提示语  
12.         });  
13.   
14.   
15.         var data = [{  
16.             id: 0,  
17.             text: 'enhancement'  
18.         }, {  
19.             id: 1,  
20.             text: 'bug'  
21.         }, {  
22.             id: 2,  
23.             text: 'duplicate'  
24.         }, {  
25.             id: 3,  
26.             text: 'invalid'  
27.         }, {  
28.             id: 4,  
29.             text: 'wontfix'  
30.         }];  
31.   
32.         $(".js-example-data-array").select2({  
33.             data: data  
34.         })  
35.   
36.         $(".js-example-data-array-selected").select2({  
37.             data: data  
38.         })  
39.   
40.     });