layui下拉搜索框。xm-select 1.下载
把 xm-select 下载下来，。解压把 xm-select.js 放到项⽬⾥；
2.引⼊js⽂件
在页⾯引⼊ xm-select.js
<script type="text/javascript" src="js/xm-select.js"></script>
3. div 标签
<div class="layui-form-item">
<label class="layui-form-label">船舶：</label>
<div class="layui-input-block">
<div id="mobile" class="xm-select-demo"></div>
</div>
</div>
4.js 代码
<script type="text/javascript">
searchTips: "请输⼊船舶名称搜索",
el: '#mobile',
filterable: true,//是否开启搜索
remoteSearch: true,//是否开启⾃定义搜索 (远程搜索)
radio: true,//单选
clickClose: true,//是否点击选项后⾃动关闭下拉框
delay: 1000,//输⼊⽂字1秒后搜索
layVerify: 'required',//提交校验是否选了数据
model: {
label: {
type: 'text' //把选中的数据变成⽂字样式
}
},
//选中执⾏此⽅法(⾃定)
on: function (data) {
//data.arr:  当前已选中的数据
if (data.arr.length > 0) {
$("#mobileId").val(data.arr[0].value);
$("#mobileName").val(data.arr[0].name);
} else {
$("#mobileId").val(null);
$("#mobileName").val(null);
}
},
remoteMethod: function (val, cb, show) {
var array = new Array();layui下载
//船舶下拉框
$.ajax({
url: basePath + '/YjEqipment/selectMobile',//⾃⼰的搜索请求url
type: 'post',
data: {
'mobileName': val,//请求参数
},
dataType: 'json',
success: function (data) {
for (var i = 0; i < data.length; i++) {
array.push({
name: data[i].mobileName,
value: data[i].mobileId,
})
}
cb(array);
},
error: function (data) {
cb([]);
}
});
},
data: []
})
</script>
我⾃⼰接⼝返回的列表数据：
效果：
官⽅：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。