fromSelects 插件应用

1.在HTML页面新建select控件

		<div class="layui-form-item">
			<label class="layui-form-label" ><span style="color: red;">*</span>一级标签</label>
			<div class="layui-input-block">
				<select name="city" lay-search lay-verify="required" lay-filter="citySelect" xm-select="cityXmSelect" xm-select-search>
					<option value="">请选择一级标签，可搜索</option>
					<option value="北京">北京</option>
					<option value="上海">上海</option>
					<option value="杭州">杭州</option>
					<option value="西安">西安</option>
				</select>
			</div>
		</div>

2.在HTML页面引用layui.all.js、formSelsects-v4.js

<script src="/static/plugins/layui-formSelects/UI/layui-v2.5.5/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="/static/plugins/layui-formSelects/src/formSelects-v4.js">
</script>
<script type="text/javascript" src="/static/js/tagSelect/testlayuiFormSelects.js"></script>

3.在testlayuiFormSelects.js文件中获取formSelecds

var $ = layui.jquery,
    layer = layui.layer, //获取当前窗口的layer对象
    laytpl = layui.laytpl,
    form = layui.form;
    formSelects = layui.formSelects;
    ;

4.配置当前cityXmSelect

formSelects.config('cityXmSelect', {
    type: 'get',                //请求方式: post, get, put, delete...
    header: {},                 //自定义请求头
    data: {},                   //自定义除搜索内容外的其他数据
    searchUrl: '',              //搜索地址, 默认使用xm-select-search的值, 此参数优先级高
    searchName: 'keyword',      //自定义搜索内容的key值
    searchVal: '',              //自定义搜索内容, 搜素一次后失效, 优先级高于搜索框中的值
    keyName: 'name',            //自定义返回数据中name的key, 默认 name
    keyVal: 'id',            //自定义返回数据中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);    //返回的结果
        return result.data
    },
    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.data;  //必须return一个结果, 这个结果要符合对应的数据结构
    },
    beforeSearch: function(id, url, searchVal){         //搜索前调用此方法, return true将触发搜索, 否则不触发
        if(!searchVal){//如果搜索内容为空,就不触发搜索
            return false;
        }
        return true;
    },
    clearInput: false,          //当有搜索内容时, 点击选项是否清空搜索内容, 默认不清空
}, true);

5.发出请求服务端请求

formSelects.data('cityXmSelect', 'server', {
    url: '/tag/queryList/1',
    keyword: '水果'
});

6.对该formSelects进行重新渲染

formSelects.render('cityXmSelect', {
    init: ["1", "2"],               //默认值
    skin: "danger",                 //多选皮肤
    height: "auto",                 //是否固定高度, 38px | auto
    radio: false,                   //是否设置为单选模式
    direction: "auto",
    create: function(id, name){
        console.log(id);    //多选id
        console.log(name);  //创建的标签名称

        return Date.now();  //返回该标签对应的val
    },
    //filter: fun...,         //同formSelects.filter
    max: 3,                 //多选最多选择量
    //maxTips: fun...,        //同formSelects.maxTips
    //on: fun...,             //同formSelects.on
    searchType: "title",    //搜索框的位置
    template: function(name, value, selected, disabled){
        console.log(name);      //选项名
        console.log(value);     //选项值
        console.log(selected);  //是否被选中
        console.log(disabled);  //是否被禁用

        //例如: 反转字符串
        //return name.split('').reverse().join('');
        return name;        //返回一个html结构, 用于显示选项
    },
    showCount: 0,           //多选的label数量, 0,负值,非数字则显示全部
});