解决layui from select 带搜索 功能下拉 动态赋值问题

应用场景:

image

当前用户有过万的数据量 直接全部拉出来一个大列表 数据量太多 做了一个 接口 通过用户名 模糊查询 尽量减少数据量

这样就需要 解决layui from select 带搜索 下拉的 原有先请求所有数据的逻辑,目前要修改为 根据搜索文本 再去异步请求数据
-------------------------

注意 防坑:

1. 输入 防抖方法
2. 输入搜索内容 的监听
3. 动态赋值后 搜索内容丢失问题

4. 再次搜索上传数据还在的问题

------------------------


html:

        
        用户搜索                                选择用户

 js:

// 防抖函数 - 延迟执行搜索逻辑
window.debounce = function (func, delay) {
    let timer = null;
    return function () {
        const context = this;
        const args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(context, args);
        }, delay);
    };
}
            //请求数据
            window.filterOptions = function (realname) {
                let index_user = layer.load(2);
                $.ajax({
                    url: '/xiaoguan/user/select',
                    method: 'post',
                    data: {
                        name: realname || ''
                    },
                    dataType: 'json',
                    success: function (res) {
                        if (res.data && res.data.length > 0) {
                            $('#selectUser').empty().append(new Option('选择用户', ''));
                            res.data.forEach(function (v) {
                                $('#selectUser').append(new Option(v.realname, v.id));
                            });
                            layui.form.render("select");
                            setTimeout(function () {
                                $('.layui-form-select .layui-input').click();
                                $('.layui-form-select .layui-input').focus();
                                $('.layui-form-select .layui-input').val(realname || '');
                            }, 100);
                        }
                    },
                    complete: function () {
                        layer.close(index_user);
                    }
                });
            }

            // 监听搜索框输入事件
            form.on('select(selectUser)', function (data) {
                var value = data.value;
                if (value === '') return; // 初始状态不加载
                console.log('Selected User ID:', value);
                
            });

            // 使用防抖包装搜索处理函数
            const handleSearch = debounce(function () {
                const searchValue = $(this).val();
                console.log('搜索框输入内容:', searchValue);
                // 执行过滤逻辑
                filterOptions(searchValue);
            }, 1000);

            // 监听搜索框输入事件
            $(document).on('input', '.layui-form-select .layui-input', handleSearch);