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">
xmSelect.render({
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();
//船舶下拉框
$.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>
我自己接口返回的列表数据：
效果：
