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,负值,非数字则显示全部
});