首先提供xm-select的开源下载地址 : xm-select: 基于Layui, 下拉选择框的多选解决方案 - Gitee.com
官网文档地址:xm-select (gitee.io)
xm-select多选框官方接收的数据格式:
{name: '水果' + val, value: val + 1},
{name: '蔬菜' + val, value: val + 2, selected: true},
{name: '桌子' + val, value: val + 3},
{name: '北京' + val, value: val + 4},
以下远程搜索多选框代码中,get请求我是直接返回上面的格式,但是一直报错:
TypeError Cannot read properties of undefined (reading 'filter')
后访问官网接口url返回值发现返回值格式与layui相同,因此改成 { "code": 0, "msg": "success", "data": []}返回值格式即可解决
以下保存到本地xx.html,即可直接运行(layui文件夹与xm-select.js需在html文件同级目录)
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script src="layui/layui.js" charset="utf-8"></script>
<script src="xm-select.js" charset="utf-8"></script>
<div id="demo1"></div>
<script>
var $ = layui.$;
var demo1 = xmSelect.render({
el: '#demo1',
autoRow: true,
tips: '搜索部品名或部品号',
toolbar: { show: true },
filterable: true,
remoteSearch: true,
remoteMethod: function(val, cb, show){
if(!val){//这里如果val为空, 则不触发搜索
return cb([]);
}else{
$.get('/supplies/getXmSelectByCodeOrName?itemNane='+val, function(res) { //res必须返回 { "code": 0, "msg": "success", "data": []}格式,否则会报 :TypeError Cannot read properties of undefined (reading 'filter')
cb(res.data);
layer.msg('搜索完毕, 搜索关键词:'+val+', 查询结果: '+res.data.length+' 条', {time: 2000,icon: 1});
})
}
},
data: []
})
</script>