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">
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>

我自己接口返回的列表数据：

效果：

官方：https://maplemei.gitee.io/xm-select/#/component/install