涉及到的基础文件：引用 pinyin.js 和 initials.js。再引用 layui.js 和 xm-select.js
1、html 代码：
<div class="layui-inline">
<label class="layui-form-label">多选下拉框：</label>
<div class="layui-input-inline">
<div id="test"></div>
</div>
</div>
2、js 代码：
//搜索过滤器
var myFilter_xmSel = function (value, text, id) {
//value：输入值; text：option的text值；id：option的value值；
var result;
if (escape(value).indexOf("%u") != -1) { //汉字
result = text.indexOf(value) > -1;
} else {
var len = value.length;
result = ConvertPinyin(text).substring(0, len) === value || makePy(text)[0].toLowerCase().substring(0, len) === value || text.toLowerCase().indexOf(value) > -1 || (id === undefined ? false : id.indexOf(value) > -1);
}
return result;
};
//多选下拉框初始化
let xmSel = xmSelect.render({
el: '#test',
filterable: true,//开启搜索
filterMethod: function (val, item, index, prop) {//重写搜索方法。
if (val == item.value) {//把value相同的搜索出来
return true;
}
if (item.name.indexOf(val) != -1) {//名称中包含的搜索出来
return true;
}
return myFilter_xmSel(val, item.name, item.value);
},
paging: true,//开启分页
pageSize: 5,//每页条数
name: 'test',
layVerify: 'required',
toolbar: {
show: true,
},
data: [
//这里填自己的下拉框选项值;
{name: '水果', value: '1'},
{name: '玩具', value: '2'},
{name: '作业', value: '1'},
]
});
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！