layui 2.8+ 的 lay-search 不支持多级关联搜索,仅适用于单级本地模糊匹配;多级需拆解为联动(监听上级变更并异步加载下级数据)与搜索(用 lay-select 等支持远程搜索的组件实现),并注意请求覆盖、缓存及状态同步问题。
多级关联搜索 ≠ 原生 lay-search 能解决的事
layui 2.8+ 的 lay-search 只支持单级 select 的本地文本模糊匹配,对「省→市→区」这类依赖上一级选中值再搜索下一级的场景完全无效。它不发请求、不传参数、不处理异步响应,强行套用只会看到输入框出现但搜不出结果,或搜出全量数据(比如搜“北京”把全国城市都列出来)。
必须拆解:先联动,再搜索
多级关联搜索本质是两件事叠加:① 上级变更触发下级数据加载(联动),② 下级加载完成后支持关键词过滤(搜索)。不能指望一个属性搞定,得分开控制。
- 联动部分用
form.on('select(province)', callback)监听,清空并禁用下级select,调用$.ajax拉取城市数据 - 搜索部分不能靠
lay-search,而要等城市数据加载完成后再初始化一个支持远程搜索的组件(如lay-select或formSelects) - 关键点:城市
select的 DOM 必须在联动回调里动态插入或重置,否则搜索组件无法绑定到真实节点
推荐组合:lay-select + 手动联动链
用 lay-select 替换原生 select,它原生支持远程搜索 + 防抖 + 参数透传,且兼容 layui 表单事件体系。但注意:它不自动联动,需你手动串起请求链。
- 省份 select 保持原生,监听
form.on('select(province)'),拿到provinceId - 在回调里调用
laySelect.render()初始化城市下拉框,url设为/api/cities?province_id=xxx - 区县下拉框同理,在城市 select 的
done回调里再 render 一次,传入cityId - 所有
lay-select实例必须用不同elem(如#citySelect、#districtSelect),避免互相覆盖
容易被忽略的细节:搜索框焦点与状态同步
用户快速切换省份时,旧的城市搜索请求可能还没返回,新的请求已发出。此时若直接渲染新结果,会导致搜索框内容和下拉列表错位(比如搜“朝阳”时列表却是“杭州西湖区”)。
- 每次发起新请求前,先调用
laySelect.clear('citySelect')清空当前搜索词和选项 - 在
laySelect.render()的beforeRequest钩子里加个时间戳或随机数参数,防止浏览器缓存返回旧数据 - 如果用了
searchPlaceholder,确保它在每次重新 render 后仍生效——有些版本需要手动调用laySelect.reload('citySelect')


















