解决layui from select 带搜索 功能下拉 动态赋值问题
应用场景:
当前用户有过万的数据量 直接全部拉出来一个大列表 数据量太多 做了一个 接口 通过用户名 模糊查询 尽量减少数据量
这样就需要 解决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);