select2用法总结 - 快车库

Select2是什么

Select2是一款可以对HTML的<select>标签进行功能优化的jQuery插件,支持对列表进行检索,从远程数据源获取列表项等各种功能.

官网文档在此:https://select2.github.io

代码示例

示例1.从数组中获取列表项且支持搜索

前端代码:


<!DOCTYPE html>
<html>
<head>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script src="//cdn.bootcss.com/select2/4.0.3/js/select2.min.js"></script>
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/select2/4.0.3/css/select2.min.css" rel="stylesheet">

</head>
<body>

<select id="select2_sample" name="sample" style="width:75%" ></select>

</body>

<script>
    $(document).ready(function(){

        var data = [{id: 0, text: 'apple'}, {id: 1, text: 'banana'}, {id: 2, text: 'pear'}];//下拉列表中的数据项

        $("#select2_sample").select2({
            data: data
        });//启动select2

    });
</script>

示例2.从服务器(API)异步获取列表项且支持搜索

前端代码:

<!DOCTYPE html>
<html>
<head>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script src="//cdn.bootcss.com/select2/4.0.3/js/select2.min.js"></script>
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/select2/4.0.3/css/select2.min.css" rel="stylesheet">

</head>
<body>

<select id="select2_sample" name="sample" style="width:75%" >
    <option value="100" selected="selected">默认项</option>
</select>

</body>

<script>
    $(document).ready(function(){

        $("#select2_sample").select2({
            ajax: {

                url     : "http://123.57.28.146:8088/sample",//请求的API地址
                dataType: 'json',//数据类型
                data    : function(params){

                    return {
                        q   : params.term//此处是最终传递给API的参数
                    }
                },
                results : function(data){ return data;}//返回的结果

            }
        });//启动select2

    });
</script>

API代码(基于Laravel 5.0)

public function sample()
    {
        $results = [];
        $input       = Input::get('q');

        if($input == 'A'){
            
            $results[] = array("id"=>"1","text"=>"apple");
            $results[] = array("id"=>"2","text"=>"apache");
        }
        if($input == 'B'){

            $results[] = array("id"=>"1","text"=>"banana");
            $results[] = array("id"=>"2","text"=>"bro");
        }
        if($input == 'C'){

            $results[] = array("id"=>"1","text"=>"CL");
            $results[] = array("id"=>"2","text"=>"COOL");
        }

        return array('results' => $results);

    }

示例3.从服务器(API)异步获取列表项且支持图片显示

前端代码:

<!DOCTYPE html>
<html>
<head>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script src="//cdn.bootcss.com/select2/4.0.3/js/select2.min.js"></script>
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/select2/4.0.3/css/select2.min.css" rel="stylesheet">

    <style>
        .img-car{

            height:20px;
            width:30px;
        }
    </style>

</head>
<body>

<select id="select2_sample" name="sample" style="width:75%" >
    <option value="100" selected="selected">默认项</option>
</select>

</body>

<script>
    $(document).ready(function(){

        function formatState (state) {

            if (!state.id) { return state.text; }//未找到结果时直接跳出函数
            var $state = $(
                    '<span><img src="http://ocv7z9x4r.bkt.clouddn.com/car_logo_' + state.text + '.jpg" class="img-car" />' + state.text + '</span>'
            );//将API返回的结果转换为模板
            return $state;
        }

        $("#select2_sample").select2({

            ajax: {

                url     : "http://123.57.28.146:8088/sample",//请求的API地址
                dataType: 'json',//数据类型
                data    : function(params){

                    return {
                        q   : params.term//此处是最终传递给API的参数
                    }
                },
                results : function(data){ return data;}//返回的结果

            },
            templateResult: formatState//模板化
        });//启动select2

    });
</script>

API代码(基于Laravel 5.0)

public function sample()
    {
        $results = [];
        $input       = Input::get('q');

        if($input == 'CAR'){

            $results[] = array("id"=>"1","text"=>"benz");
            $results[] = array("id"=>"2","text"=>"bmw");
            $results[] = array("id"=>"2","text"=>"audi");
        }

        return array('results' => $results);

    }

效果图:

示例4.为Select2设置各种参数

参数名称	参数用途
delay	默认情况下,Select2会在用户改变搜索内容时立即触发AJAX请求。使用delay参数后,Select会在用户完成输入后,等待delay参数设置的毫秒之后才触发AJAX请求
minimumInputLength	用于设置用户需要输入的最小字母数,小于该字母数时Select2不会触发AJAX请求
maximumInputLength	用于设置用户需要输入的最大字母数,大于该字母数时Select2不会触发AJAX请求

示例代码:

<!DOCTYPE html>
<html>
<head>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script src="//cdn.bootcss.com/select2/4.0.3/js/select2.min.js"></script>
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/select2/4.0.3/css/select2.min.css" rel="stylesheet">

    <style>
        .img-car{

            height:20px;
            width:30px;
        }
    </style>

</head>
<body>

<label for="select2_sample">
    GeekZhou.com
    <select id="select2_sample" name="sample" style="width:75%" >
    </select>
</label>

</body>

<script>
    $(document).ready(function(){

        function formatState (state) {

            if (!state.id) { return state.text; }//未找到结果时直接跳出函数
            var $state = $(
                    '<span><img src="http://ocv7z9x4r.bkt.clouddn.com/car_logo_' + state.text + '.jpg" class="img-car" />' + state.text + '</span>'
            );//将API返回的结果转换为模板
            return $state;
        }

        $("#select2_sample").select2({

            minimumInputLength: 2,
            maximumInputLength: 5,
            ajax: {

                delay   : 500,
                url     : "http://123.57.28.146:8088/sample",//请求的API地址
                dataType: 'json',//数据类型
                data    : function(params){

                    return {
                        q   : params.term,//此处是最终传递给API的参数
                    }
                },
                results : function(data){ return data;}//返回的结果

            },
            templateResult: formatState//模板化
        });//启动select2

    });
</script>