解决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);