1.下载

下载地址：https://github.com/hnzzmsf/layui-formSelects

2. 引入

//引入formSelects.css

//模块化使用

3. 前台代码

文章标签

初始效果：

4. 本地搜索

文章标签

页面结果：

5. 基础方法

/**
* 1.配置远程搜索, 请求头, 请求参数, 请求类型等
*
* formSelects.config(ID, Options, isJson);
*
* @param ID xm-select的值
* @param Options 配置项
* @param isJson 是否传输json数据, true将添加请求头 Content-Type: application/json; charset=UTF-8
*/
var formSelects = layui.formSelects;
formSelects.config('tags', {
type: 'get', //请求方式: post, get, put, delete…
header: {}, //自定义请求头
data: {}, //自定义除搜索内容外的其他数据
searchUrl: '', //搜索地址, 默认使用xm-select-search的值, 此参数优先级高
searchName: 'keyword', //自定义搜索内容的key值
searchVal: '', //自定义搜索内容, 搜素一次后失效, 优先级高于搜索框中的值
keyName: 'name', //自定义返回数据中name的key, 默认 name
keyVal: 'value', //自定义返回数据中value的key, 默认 value
keySel: 'selected', //自定义返回数据中selected的key, 默认 selected
keyDis: 'disabled', //自定义返回数据中disabled的key, 默认 disabled
keyChildren: 'children', //联动多选自定义children
delay: 500, //搜索延迟时间, 默认停止输入500ms后开始搜索
direction: 'auto', //多选下拉方向, auto|up|down
response: {
statusCode: 0, //成功状态码
statusName: 'code', //code key
msgName: 'msg', //msg key
dataName: 'data' //data key
},
success: function(id, url, searchVal, result){ //使用远程方式的success回调
console.log(id); //组件ID xm-select
console.log(url); //URL
console.log(searchVal); //搜索的value
console.log(result); //返回的结果
},
error: function(id, url, searchVal, err){ //使用远程方式的error回调
//同上
console.log(err); //err对象
},
beforeSuccess: function(id, url, searchVal, result){ //success之前的回调, 干嘛呢? 处理数据的, 如果后台不想修改数据, 你也不想修改源码, 那就用这种方式处理下数据结构吧
console.log(id); //组件ID xm-select
console.log(url); //URL
console.log(searchVal); //搜索的value
console.log(result); //返回的结果

    return result;  //必须return一个结果, 这个结果要符合对应的数据结构  
},  
beforeSearch: function(id, url, searchVal){         //搜索前调用此方法, return true将触发搜索, 否则不触发  
    if(!searchVal){//如果搜索内容为空,就不触发搜索  
        return false;  
    }  
    return true;  
},  
clearInput: false,          //当有搜索内容时, 点击选项是否清空搜索内容, 默认不清空  

}, true);

/**
* 1.多选数据赋值
*
* formSelects.data(ID, type, config);
*
* @param ID xm-select的值
* @param type 'local' | 'server', 本地数据或者远程数据
* @param config 配置项
* arr 本地数据数组
* url 远程数据链接
* keyword 远程数据搜索内容, 其他附加数据可以使用 formSelects.config设置
* linkage 是否为联动多选
* linkageWidth 联动多选没级宽度
*/

//以下代码可以在console中运行测试, 结果查看基础示例第一个
var formSelects = layui.formSelects;

//local模式
formSelects.data('select1', 'local', {
arr: [
{"name": "分组-1", "type": "optgroup"},
{"name": "北京", "value": 1},
{"name": "上海", "value": 2},
{"name": "分组-2", "type": "optgroup"},
{"name": "广州", "value": 3},
{"name": "深圳", "value": 4},
{"name": "天津", "value": 5}
]
});

//server模式
formSelects.data('select1', 'server', {
url: 'https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data',
keyword: '水果'
});
//server返回数据与远程搜索数据结构一致
{
"code":0,
"msg":"success",
"data":[
{"name":"北京","value":1,"selected":"","disabled":""},
{"name":"上海","value":2,"selected":"","disabled":""},
{"name":"广州","value":3,"selected":"selected","disabled":""},
{"name":"深圳","value":4,"selected":"","disabled":"disabled"},
{"name":"天津","value":5,"selected":"","disabled":""}
]
}
//当然你也可以偷懒, 返回如下结构
[
{"name":"北京","value":1,"selected":"","disabled":""},
{"name":"上海","value":2,"selected":"","disabled":""},
{"name":"广州","value":3,"selected":"selected","disabled":""},
{"name":"深圳","value":4,"selected":"","disabled":"disabled"},
{"name":"天津","value":5,"selected":"","disabled":""}
]

6. 远程搜索

//加载模块
layui.use(['jquery', 'formSelects'], function(){
var formSelects = layui.formSelects;

    //local模式  
    formSelects.data('tags', 'local', {  
        arr: \[  
        {"name": "随笔", "value": 1},  
        {"name": "测试", "value": 2},  
        {"name": "博客日志", "value": 3}  
        \]  
    });  

});

页面结果：

//加载模块
layui.use(['jquery', 'formSelects'], function(){
var formSelects = layui.formSelects;

    //server模式  
    formSelects.config('tags', {  
        keyName: 'name',  
        keyVal: 'id'  
    }).data('tags', 'server', {  
        url: "/tag/findAll.do"  
    });  

});

从服务器中返回的数据如下：

[SysTag{id=1, name='随笔', count=null}, SysTag{id=2, name='测试', count=null}, SysTag{id=3, name='博客日志', count=null}]

页面结果：

其实在官网文档里这些东西都讲的很清楚，大家可以去看看。

官方文档：https://hnzzmsf.github.io/example/example_v4.html#methods-data