Layui select 下拉框需弃用原生 <select>，改用 layui.select 模块实现远程搜索；必须手动引入模块、用 <div> 占位并 JS 初始化，配置 request 和 parseData 处理关键字请求与数据解析，同时自行实现防抖、空关键词拦截、loading 及表单值同步。
select 下拉框不支持原生搜索，必须换用 layui.select 的增强模式
layui 官方 select 组件默认是纯 html <select> 渲染，没有输入框、不响应键盘输入，根本没法“搜索”。想实现关键字搜索 + 远程加载，必须弃用基础 select，改用 layui 的 layui.select 模块提供的「远程搜索下拉」能力——它底层其实是用 layui.dropdown + input + 自定义菜单模拟的。
关键前提是：你得手动引入并初始化 select 模块（Layui 2.8+ 默认不自动加载），且不能写 <select lay-search> 这种静态写法。
- 错误写法：
<select id="area" lay-search></select>→ 不会触发远程请求，只做本地过滤 - 正确路径：用
<div id="area-search"></div>占位，再 JS 初始化 - 必须调用
layui.use('select')，否则layui.select是 undefined
如何用 layui.select 发起带关键字的远程请求
核心是配置 parseData 和 request 两个函数。Layui 不会自动拼接 keyword 参数，你需要在 request.url 里手动加查询参数，或在 request.data 中注入当前输入值。
layui.use(['select'], function(){
var select = layui.select;
select.render({
elem: '#area-search',
// 关键：关闭本地搜索，交由后端过滤
search: false,
// 每次输入都会触发此函数，返回真实请求配置
request: function(opts) {
return {
url: '/api/areas',
method: 'get',
data: {
keyword: opts.keyword || '', // opts.keyword 就是当前搜索框内容
limit: 10
}
};
},
// 把后端返回的 {code:0, data: [...]} 转成 select 需要的格式
parseData: function(res) {
return {
code: res.code === 0 ? 0 : 1,
msg: res.msg || '',
count: res.data.length,
data: res.data.map(function(item) {
return {value: item.id, title: item.name};
})
};
}
});
});
-
opts.keyword是 Layui 内部传入的当前搜索词，不是 DOM 值，别去$('#area-search').val() - 后端接口必须支持
GET /api/areas?keyword=北京这类参数，且返回结构要匹配parseData的期望 - 如果后端用 POST，把
method: 'post'改掉即可，但data会作为请求体发送
防抖、空关键词、loading 状态这些细节必须自己补
Layui select 不内置防抖，连续敲字会发一堆请求；也不自动处理空搜索（比如用户删光文字）；更不会显示 loading。这些都得靠你干预 request 函数。
- 加防抖：用
layui.hint().set({offset: [0, 0]})不行，得自己套setTimeout/clearTimeout - 空关键词拦截：在
request开头加if (!opts.keyword.trim()) return null;，返回null就不发请求 - Loading 提示：在
request返回前手动加layui.layer.load(2)，再在parseData或后续回调里layer.closeLoad() - 注意：
request是同步函数，不能 await，异步逻辑（如 debounce）必须提前完成再 return 请求配置
和表单提交、校验联动时容易丢 value
因为这个 select 是用 <div> 模拟的，原始 <form> 提交时根本拿不到它的值。你必须在提交前手动把选中项写进一个隐藏域，或者改用 form.on('submit(...)') 拿 layui.select.getValue('area-search')。
- 推荐方案：加一个隐藏
<input name="area_id" id="area_id">，监听select.on('change(...)更新它 - 校验失效：Layui
form.verify默认只扫input/select/textarea，得给隐藏域加lay-verify="required"并确保它被渲染进 form 内 - 别试图用
$('select').val()获取值 —— 这个 select 根本不存在 DOM 中
远程搜索下拉真正的复杂点不在请求本身，而在于状态同步：输入框内容、下拉菜单数据、隐藏域 value、校验反馈、loading 显示，这四者必须严格对齐，稍有错位就会出现“看着选了但提交为空”这类问题。
