slect2插件使用心得

 select2折腾了两天，终于把它搞好了，前几天茶不思饭不想的，现在这里给大家分享一下如何使用select2这个插件

有它官网的链接，http://select2.github.io/options.html#events ;

全是英文，英文水平好的可以去研读，如果觉得有困难的同学可以

使用谷歌浏览器浏览，它有自带的英文翻译功能。

首先，它能接受的数据格式是  id ：id  ，text: value ,一般来说，有两种数据传输过来到页面

一种是本地数据，一种是加载远程，采用ajax，从自己的本地数据库查出数据来传递给

前台，不多说，直接上代码
前台页面
 

后台代码




 



 

注意，返回给页面的数据格式必须是json格式的，不然被坑死

js代码： 

  

 var oMenuIcon = $("#categoryId").select2({

        minimumResultsForSearch: Infinity,

        ajax: {

            url: ctx + "/backend/category/nameList",  //请求后台的url

            dataType: 'json',//返回格式

            delay: 0,//延迟加载，单位毫秒

            data: function (params) {

                return {

                    query: params.term //输入框要搜索的数据

                };

            },

            processResults: function (data, params) {

                return {

                    results: data.obj  //一定要注意这个坑 我就是呗这个坑给坑了2天，这里一定要和浏览器的f12--privew查看后端数据返回respose，一定要对比一下

//这里的obj就是我后端返回json数据的头部

                };

                cache: true//缓存（感觉没什么卵用）

            },

            cache: true

        },

        // 这个不知道啥用，没实验过（待补充）

        escapeMarkup: function (markup) {

            return markup;

        },

        // 最小的输入的长度，才会去请求后台

        minimumInputLength: 0,

        templateResult: formatRepo,//这个是函数，下面有介绍

        templateSelection: formatRepoSelection

    })

    function formatRepo(repo) {//这里是渲染下拉框数据的函数

//我的后台穿过来的数据格式：[{id: 1, name: "图片", code: "1", sort: 1, createTime: "2017-01-26 15:56:51", }]

        var markup = repo.name;//这里的name就是你后台传过来的json格式的键值对里面的健，也就是我

        return markup;

    }

    function formatRepoSelection(repo) {

        return repo.name || repo.text; //这里是渲染选择数据之后的函数

    }

//这里是获取select2是否呗选择

    $("#categoryId").on('select2:select', function (evt) {

    });

    $("#categoryId").change(function () {

        $(this).valid();

    });

最后，给大家一点建议，多看官网的资料，多和自己的数据对比，必要时候可以先copy，后研读。