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>
我自己接口返回的列表數據：
效果：
