JQuery autocomplete和Select2控件的技术总结

最近工作有点忙,难得等到周末,静下心来写写这大概两周遇到的小问题.

写在前面的一些话

一个自称为后台程序员的我，对于前台的技术一向感冒的我，在面对公司高层大换血的动荡时期，不得不狗血的伪装成一个前后台的技术小白，艰难的攀爬。。。这autocomplete和Select2使用起来确实费了很多时间，还是厚颜无耻的请教了百忙之中的公司前台技术人员才得以完成。。。

JQuery autocomplete 使用总结

题外话: 由于刚到公司,木有给我分配VPN,所以有些效果图不能在这展示了,去公司补上吧.

第一步: 先引入必要的文件

先引入必要的JS库文件和样式文件，当然了，还有一个自己写好JS文件（yg-wms-role-manager.js）

<link rel="stylesheet"type="text/css"href="${ctx}/assets/plugins/jquery-autocomplete/jquery.autocomplete.css"/>

<script type="text/javascript" src="${ctx}/assets/plugins/jquery-autocomplete/jquery.autocomplete.js"></script>

<script src="${ctx}/static/js/acl/role/yg-wms-role-manager.js"></script>

第二步: 写好一个需要调用此插件的前台代码

这是一个简单的input标签，由该标签去触发autocomplete

<li>
    <label class="c-h-ul-li-title" for="">角色名称：</label>
    <input type="text" id = "name" name="name" class="form-control input-small"/>
</li>

下面是autocomplete的JS文件：yg-wms-role-manager.js

function searchLoad() {
        var url = xxx.action('/acl/role/all_role_name');
        // 自动补全
        $("#name").autocomplete({
            serviceUrl: url,// Ajax请求后台路径
            cacheLength: 3,// 缓存多少条记录
            delay: 500,//输入后的延迟时间(单位毫秒)
            matchSubset:true,//是否启用缓存
            // transformResult即怎么处理从后台得到的数据
            transformResult: function(response) {
               return {// response即请求后台得到的数据
                     suggestions: $.map($.parseJSON(response), function(item) {     
                     return { value: item.name, data: item.id };
                 })
               };
            }
        });
    }

第三步： 写好一个后台方法

    @RequestMapping(value = "/all_role_name", method = RequestMethod.GET)
    public @ResponseBody List<Role> selectAllRoleName(
            @RequestParam(value = "query", required = false) String queryStr) {
        List<Role> nameList = roleService.queryAllRoleName(queryStr);
        return nameList;
    }

到此，input id = name 的自动补全功能就实现了，效果如图:

Select2 控件使用方法：

第一步： 国际惯例，先引入库文件：

<link rel="stylesheet" type="text/css" href="${ctx}/assets/plugins/select2-4.0.1/dist/css/select2.min.css"/>

<script type="text/javascript" src="${ctx}/assets/plugins/select2-4.0.1/dist/js/select2.full.js"></script>


<script src="${ctx}/static/js/acl/user/yg-wms-user-manager.js"></script>

第二步： 写好前台文件

<dd class="v-title">
     <label>角色权限：</label>
</dd>
 <dd>
    <select id="powerset" name="rol-powe" class="input-xlarge" placeholder="分配角色权限" multiple="multiple"/>
</dd>

第三步： 开始写自己的JS文件

function LoadComponet(){
    $('#powerset').select2({
        allowClear: true,  //是否允许用户清除文本信息
        ajax:{
            url : xxx.action('/acl/role/all_role_name'),
            dataType: 'json',
            delay: 250,
            data: function (params) {
               return {
                  // 这个query就是我们请求后台加在后面的参数（还不清楚的请看下面的图）
                  query: params.term
               };
            },
            processResults: function (data, params) {
                return {
                    results: data// 后台返回的参赛（具体的可以debug看看数据结构，这里就不贴出来了）
                };
                    cache: true // 使用缓存
            },
        },
        // 这个不知道啥用，没实验过（待补充）
        escapeMarkup: function (markup) { return markup; },
        // 最小的输入的长度，才会去请求后台
        minimumInputLength: 0,
        templateResult: formatRepo,
        templateSelection: formatRepoSelection
    });
}
// 和autocomplete控件一样，用来渲染后台数据的
function formatRepo (repo) {
   if (repo.loading) return repo.text;
   return '<div>{0}</div>'.format(repo.name);
}
// 这个也没实验过，（待补充）
function formatRepoSelection (repo) {
    return repo.name || repo.text;
}

第四步： 写好一个后台

和autocomplete请求的后台一样，效果如图:

官方链接：

由于不是专业的，所以还有不懂的同学可以看下面的文档（英文的哦）

http://select2.github.io/options.html#ajax

写在后面的一些话

在运行效果出现后，我的内心是激动的。或许这就是技术的魅力吧，不管前面是一个什么样的未知世界，在窥探到一些它的秘密后，总是那么令人欣喜却忘记了前方的艰难。