select2 案例及注意事项、首字母搜索

系统管理员 2021-09-15 14:52 330阅读 0赞

select2是一个非常好用的下拉框插件，支持很多功能。

官方文档，例子：[http://select2.github.io/select2/][http_select2.github.io_select2]

一.select2 案例

1.单选

![70][]

<!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="utf-8">  
        <meta name="renderer" content="webkit|ie-comp|ie-stand">  
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />  
        <meta http-equiv="Cache-Control" content="no-siteapp" />  
        <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
        <link href="../dist/css/select2.min.css" rel="stylesheet">
    </head>  
    <body>  
    <div id="body" style="margin: 20px auto; width: 400px;">  
        <select id="e8"  class="combox">
    	    <optgroup label="水果">  
    	        <option value="苹果">苹果</option>  
    	        <option value="梨">梨</option>  
    	        <option value="香蕉">香蕉</option>  
    	        <option value="西瓜">西瓜</option>  
    	    </optgroup>  
    	    <optgroup label="蔬菜">  
    	        <option value="上海青">上海青</option>  
    	        <option value="南瓜">南瓜</option>  
    	        <option value="西红柿">西红柿</option>  
    	        <option value="茄子">茄子</option>  
    	    </optgroup>  
    	    <optgroup label="书籍">  
    	        <option value="温暖的炫">温暖的炫</option>  
    	        <option value="从我身边路过">从我身边路过</option>  
    	        <option value="钢铁是怎么样练成">钢铁是怎么样练成</option>   
    	    </optgroup>  
    	</select>
    </div>  
        <script src="../dist/js/jQuery-2.1.4.min.js"></script>
        <script src="../dist/js/select2.full.min.js"></script>
    <script type="text/javascript">  
    $(function(){  
    	$("#e8").select2();
    });  
    </script>  
    </body>  
    </html>

**通过初始化获取数据**

(1)data获取数据

<select id="yblx00" name="yblx00" class="combox form-control" style="width:100%" >
    	<option></option>>    
    </select> 
    
    var dataList = [
    	{ "id": 1001, "text": "医保1" },
    	{ "id": 1002, "text": "医保2" },
    	{ "id": 1003, "text": "医保3" },
    	{ "id": 1004, "text": "医保4" },
    	{ "id": 1005, "text": "医保5" }
    ];
    	
    $("#yblx00").select2({
        data: initData,
        placeholder:'请选择医保类型',//默认文字提示
        language: "zh-CN",//汉化
        allowClear: true//允许清空
    });	<option></option>>    
    </select> 
    
    var dataList = [
    	{ "id": 1001, "text": "医保1" },
    	{ "id": 1002, "text": "医保2" },
    	{ "id": 1003, "text": "医保3" },
    	{ "id": 1004, "text": "医保4" },
    	{ "id": 1005, "text": "医保5" }
    ];
    	
    $("#yblx00").select2({
        data: initData,
        placeholder:'请选择医保类型',//默认文字提示
        language: "zh-CN",//汉化
        allowClear: true//允许清空
    });

(2).通过ajax

**processResults 选项将API返回的数据转换为Select2期望的格式**

select.json

[
    	{ "id": 1001, "text": "医保1" },
    	{ "id": 1002, "text": "医保2" },
    	{ "id": 1003, "text": "医保3" },
    	{ "id": 1004, "text": "医保4" },
    	{ "id": 1005, "text": "医保5" }
    ]

$("#yblx00").select2({
    	ajax: {
    		url: "select.json",
    		dataType: 'json',
    		type:'GET',
    		delay: 250,
    		data: function (params) {
    			return {
    				q: params.term,
    			};
    		},
    		processResults: function (data) {
    			var arr=[];
    			for(var =0;i<data.length;i++){
    				arr.push({"id":data[i].id,"text":data[i].value0]})
    			}
    			// 后端返回值改成 select2插件想要的格式
    			return {
    				results: arr
    			};
    		},
    		cache: true
    	}, 
    	placeholder:'请选择医保类型',//默认文字提示
    	formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
    	formatSelection: function formatRepoSelection(repo){return repo.text;}, // 函数用于呈现当前的选择
    	allowClear: true//允许清空
    });

2.多选

![70 1][]

<!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="utf-8">  
        <meta name="renderer" content="webkit|ie-comp|ie-stand">  
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />  
        <meta http-equiv="Cache-Control" content="no-siteapp" />  
        <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
        <link href="../dist/css/select2.min.css" rel="stylesheet">
    </head>  
    <body>  
    <div id="body" style="margin: auto; width: 400px;">  
        <select id="e14" multiple style="width:300px" class="populate">
    	    <optgroup label="水果">  
    	        <option value="苹果">苹果</option>  
    	        <option value="梨">梨</option>  
    	        <option value="香蕉">香蕉</option>  
    	        <option value="西瓜">西瓜</option>  
    	    </optgroup>  
    	    <optgroup label="蔬菜">  
    	        <option value="上海青">上海青</option>  
    	        <option value="南瓜">南瓜</option>  
    	        <option value="西红柿">西红柿</option>  
    	        <option value="茄子">茄子</option>  
    	    </optgroup>  
    	    <optgroup label="书籍">  
    	        <option value="温暖的炫">温暖的炫</option>  
    	        <option value="从我身边路过">从我身边路过</option>  
    	        <option value="钢铁是怎么样练成">钢铁是怎么样练成</option>   
    	    </optgroup>  
    	</select>
    </div>  
        <script src="../dist/js/jQuery-2.1.4.min.js"></script>
        <script src="../dist/js/select2.full.min.js"></script>
    <script type="text/javascript">  
    $(function(){  
    // 1.默认选中
    setTimeout(function(){
    	$("#e14").val(["苹果","温暖的炫"]).select2();
    },100)
    	//2.获取选中的值
    	var selected = $("#e14").select2("data");//选择的值
        var arr=[];
        for (var i=0;i<selected.length;i++) {
            arr.push(selected[i].text);
        }
    	console.log(arr)
    });  
    </script>  
    </body>  
    </html>

**通过初始化获取数据**

(1)data获取数据

<select id="aae376"  multiple style="width:100%" class="populate" >
     <option></option>    
     </select>
    	
    var initData=[
            { "text": "熟悉的", "children": [{ "id": 1, "text": "Java" }, { "id": 2, "text": "JavaScript" }, { "id": 3, "text": "C#" }, { "id": 4, "text": "PHP" }] },
            { "text": "不熟悉的", "children": [{ "id": 2, "text": "C++" }, { "id": 6, "text": "Python" }, { "id": 7, "text": "GO" }] }
        ];
    $("#aae376").select2({
    	data: initData,
    	placeholder:'请选择医保类型',//默认文字提示
    	language: "zh-CN",//汉化
    	allowClear: true//允许清空
    });

(2).通过ajax

select.json

[
        { "text": "熟悉的", "children": [{ "id": 1, "text": "Java" }, { "id": 2, "text": "JavaScript" }, { "id": 3, "text": "C#" }, { "id": 4, "text": "PHP" }] },
        { "text": "不熟悉的", "children": [{ "id": 5, "text": "C++" }, { "id": 6, "text": "Python" }, { "id": 7, "text": "GO" }] }
    ]

$("#aae376").select2({
            ajax: {
                url: "select.json",
                dataType: 'json',
                type:'GET',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term,
                    };
                },
                processResults: function (data) {
                    console.log(data)
                    return {
                        results: data
                    };
                },
                cache: true
            }, 
            placeholder:'请选择医保类型',//默认文字提示
            formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
            formatSelection: function formatRepoSelection(repo){return repo.text;}, // 函数用于呈现当前的选择
            allowClear: true//允许清空
        });

3.添加首字母搜索

a.添加pinyin.js 插件[下载地址][Link 1]

b.修改插件

function matcher (params, data) \{ 里面最后一块换成：

var original = '',term = stripDiacritics(params.term).toUpperCase();
            if (stripDiacritics(data.text).toPinYin != undefined) 
            original = stripDiacritics(data.text).toPinYin().indexOf(stripDiacritics(params.term).toUpperCase());
            if(original==-1){
            original = stripDiacritics(data.text).toUpperCase().indexOf(term);
            }
            return original>-1?data:null;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70][]

二.注意事项

1.初始化是 不选择

2.在BootStrap的modal中使用Select2搜索框无法输入

一般有两方面的原因   
A.检查下modal的div中是否有tabindex=”-1”，这个属性,如果有，则把这个属性去掉，

<div class="modal fade in" id="dialog-new-draft">  
B.js代码中加入

$.fn.modal.Constructor.prototype.enforceFocus = function () \{\};

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 1][]

参考：

# [Select2学习总结][Select2] #

[http_select2.github.io_select2]: http://select2.github.io/select2/
[70]: /images/20210813/cafb33f4fe874865a803d6d76035bc03.png
[70 1]: /images/20210813/c7d68968cb2045ce976acf02bcf3e0eb.png
[Link 1]: https://download.csdn.net/download/gao_xu_520/10976049
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70]: /images/20210813/2930d4133d6747fbbcb635f642ef2a72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 1]: /images/20210813/312c437b68bd42cb8e102fbef164282b.png
[Select2]: https://blog.csdn.net/jianyuerensheng/article/details/78780696