lay-search 配置未生效因未用对象式写法;需 layui 2.9.16+ 并设 lay-search="{remote:true,url:'/api/areas'}",后端响应必须含 code:0、data 数组,每项含 value/title,且接收 q 参数;ios 输入法干扰需监听 input 事件并判断 iscomposing;拼音搜索需改 notoption 函数,引入 pinyin-js 实时转换。

lay-search 配置没生效,实际走的是前端静态过滤
默认只写 lay-search 或 lay-search="",Layui 不会发请求,而是直接在已有 <option></option> 里做 text.indexOf(value) 匹配。如果下拉项是渲染后动态加载的(比如通过 Ajax 插入 <dd></dd>),或原始 <select></select> 是空的,那就必然匹配不到。
必须用 layui 2.9.16+ 的对象式写法才能触发远程搜索:
lay-search="{ remote: true, url: '/api/areas' }"- 确保 URL 返回的是标准格式:根节点含
data字段,且每个选项用value和title键名 - 后端接口要接收
q参数(如/api/areas?q=杭州),不能忽略或改名
后端返回格式错一个字段,前端就空白
Layui remote 模式对响应体极其敏感。常见错误包括:
- 返回数组直接作为根节点(缺少
data包裹)→ 下拉列表不显示任何选项 - 用
text或label替代title→ 选项渲染为空白文本 - 返回
code: 200但不是0→ Layui 认为失败,静默丢弃响应 - JSON 中混入 HTML 实体或未转义双引号 → 解析失败,控制台报
SyntaxError
正确响应示例:
{
"code": 0,
"msg": "",
"data": [
{"value": "330102", "title": "杭州市上城区"},
{"value": "330106", "title": "杭州市西湖区"}
]
}
iOS 或中文输入法下输入无反应
这不是 Layui 的 bug,而是输入法组合事件干扰了值监听。iOS 和部分安卓输入法在拼音输入阶段会多次清空 input 值(compositionstart → 空值 → compositionend),导致 Layui 误判为“搜索清空”,提前重置状态。
临时绕过办法(无需改源码):
- 给
<select></select>加lay-filter="search-fix" - 用 jQuery 监听
input事件,手动触发form.render('select'),避开原生 keyup 判断 - 关键点:只在
event.originalEvent.isComposing !== true时才执行过滤逻辑
想输“sh”匹配“上海”,必须改 notOption 函数
原生 lay-search 不支持拼音,所有“怎么比”的逻辑都封装在 notOption 函数里。它只做纯字符串查找,不会调用拼音库。
实操路径很明确:
- 找到
layui/src/modules/form.js中notOption = function(value, callback, origin)定义处 - 在原始判断前插入拼音处理:
var pinyinFull = pinyin(text, {style: pinyin.STYLE_NORMAL}).toLowerCase() - 把
not = text.indexOf(value) === -1改成not = !text.toLowerCase().includes(value) && !pinyinFull.includes(value) - 引入
pinyin-js@1.0.0(别用pinyin-pro,它是异步的,会卡住同步匹配)
这个改动最小、最稳定,但注意:每次搜索都会实时算拼音,千级选项建议加防抖或预存 data-pinyin 属性缓存结果。











