JerryZst-select-input
/
index.html

<!DOCTYPE html>
<html>
<head>
    <title>selectInput</title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
    <link rel="stylesheet" type="text/css" href="./src/layui/css/layui.css"/>
    <style>
        .scroll-body {
            overflow-x: hidden;
            overflow-y: auto;
        }

        .xm-option {
            display: flex;
            align-items: center;
            position: relative;
            padding: 0 10px;
            line-height: 36px;
            cursor: pointer;
        }

        .xm-option-content {
            display: flex;
            position: relative;
            padding-left: 15px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #666;
            width: calc(100% - 20px);
        }
    </style>
</head>
<body>
<div class="layui-form layui-container" style="padding: 20px">

    <div class="layui-form-item">
        <div class="layui-input-block" id="test1"></div>
    </div>

    <div class="layui-form-item" style="margin-top: 100px">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="addSelect">动态添加选项</button>
            <button type="button" class="layui-btn" id="getValue">获取Value值</button>
            <button type="button" class="layui-btn" id="emptyValue">清空Value值</button>
            <button type="button" class="layui-btn" id="setValue">设置属性值</button>
            <button type="button" class="layui-btn" lay-submit lay-filter="*">提交</button>
        </div>
    </div>
</div>

</body>
<script src="./src/layui/layui.all.js"></script>
<script>
    layui.config({
        base: './src/modules/'
    }).extend({
        selectInput: 'selectInput/selectInput'
    }).use(['form', 'selectInput'], function () {
        var $ = layui.$,
            form = layui.form,
            selectInput = layui.selectInput;
            selectInput.render('#test1', {
            // 容器id，必传参数
            name: 'test', // 渲染的input的name值
            hasSelectIcon: true,
            layFilter: 'test', //同layui form参数lay-filter
            layVerify: 'required', //同layui form参数lay-verify
            layVerType: '', // 同layui form参数lay-verType
            layReqText: '请填写文本', //同layui form参数lay-ReqText
            initValue: '222', // 渲染初始化默认值
            placeholder: '请输入名称', // 渲染的inputplaceholder值
            // 联想select的初始化本地值，数组格式，里面的对象属性必须为value，name，value是实际选中值，name是展示值，两者可以一样
            invisibleMode: true,
            ignoreCase: true,
            data: [
                {name: 'APPLE', value: 222},
                {name: 'XIAOMI', value: 222},
                {name: 'HUAWEI', value: 222},
            ],
            hasCut: true, // 是否允许剪贴
            //url: "http://toys.shop.com/site/test", // 异步加载的url，异步加载联想词的数组值，设置url，data参数赋的值将会无效，url和data参数两者不要同时设置
            remoteSearch: false, // 是否启用远程搜索 默认是false，和远程搜索回调保存同步
            parseData: function (res) { // 此参数仅在异步加载data数据下或者远程搜索模式下有效，解析回调，如果你的异步返回的data不是上述的data格式，请在此回调格式成对应的数据格式，回调参数是异步加载的数据
                let data = [];
                res.map(item => {
                    data.push({name: item.title, value: item.val})
                });
                console.log(data)
                return data;
            },
            error: function (error) { // 异步加载出错的回调 回调参数是错误msg

            },
            done: function (data) { // 异步加载成功后的回调 回调参数加载返回数据
                console.log(data)
            },
            remoteMethod: function (value, cb) { // 远程搜索的回调函数
                // value 是input实施输入的value值
                // cb是回调处理函数，请在执行ajax搜索请求成功之后执行此回调函数

                //案例
                //这里如果val为空, 则不触发搜索
                if (!value) {
                    return cb([]);
                }
                //这里的$.ajax去请求后台拿回数据
                $.ajax({
                    method: 'get',
                    url: 'http://toys.shop.api.com/user/test', // 此处是你服务端的接口
                    data: {
                        keyword: value,
                    },
                    success: function (data) {
                        // 此处最好直接返回取你返回的 data属性，如：data.data，这样不限制你后端返回的数据对象格式，如果整体传参，必须满足：{"code":0,"msg":"success","data":[]}
                        return cb(data)
                    }
                })
            }
        });

        var ins = selectInput.getInstance("#test1");

        // 监听input 实时输入事件
        ins.on('itemInput(test1)', function (obj) {
            console.log($(obj).val());
        });

        // 监听select 选择事件
        ins.on('itemSelect(test1)', function (obj) {
            console.log(obj);
        });

        // 获取选中的value值
        //var selectValue = ins.getValue();

        // 清空输入框的value值
        //ins.emptyValue();


        $("#addSelect").click(function () {
            ins.addSelect([{
                value: 'aa bb',
                name: 1111
            },
                {
                    value: 2333,
                    name: 2222
                },
                {
                    value: 2333,
                    name: 2333
                },
                {
                    value: 2333,
                    name: 2333
                },
                {
                    value: 6666,
                    name: 9999
                },
                {
                    value: 8888,
                    name: 101010
                },
            ])
        });

        $("#emptyValue").click(function () {
            ins.emptyValue();
        })

        $("#getValue").click(function () {
            var value = ins.getValue();
            if (value) {
                if (typeof (value) === 'object') {
                    layer.msg(JSON.stringify(value));
                } else {
                    layer.msg(value);
                }
            } else {
                layer.msg('请先选择');
            }
        })

        // 设置属性值
        $("#setValue").click(function () {
            layer.prompt({title: '输入属性值设置', formType: 0}, function (pass, index) {
                layer.close(index);
                ins.setValue(pass, true);
            });
        })

        /**
         * 监听提交
         */
        form.on('submit(*)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        // 如果使用本地数据加载，不要使用设置远程 url参数 也不要将remoteSearch参数设置为 true，完整的本地赋值数据案例
        // var ins2 = selectInput.render({
        //     elem: '#test1',
        //     data: [
        //         {value: 1111, name: 1111},
        //         {value: 2333, name: 2222},
        //         {value: 2333, name: 2333},
        //         {value: 2333, name: 2333},
        //     ],
        //     placeholder: '请输入名称',
        //     name: 'list_common',
        //     remoteSearch: false
        // });
    });
</script>
</html>