级联选择器加搜索过滤需确保搜索与当前已选层级对齐且不破坏状态流：搜索框应置于当前可操作层级，禁用未选上级时的输入；仅过滤当前激活下拉选项，避免全局遍历；清空下级select时需同步重置value并防抖请求；自定义搜索面板须显式调用setvalue并触发change事件。
级联选择器加搜索过滤，不是简单把 input 换成 search 就行——搜不到、搜错层、输入后选项消失、选中值被清空，全是高频问题。核心在于：搜索必须和当前已选层级对齐，且不能破坏级联的状态流。
搜索框该放在哪一级？别用全局模糊搜
很多人一上来就给整个级联容器加一个顶部搜索框，输“朝阳”就直接匹配所有区县，结果用户还没选省，就跳出北京朝阳、广州天河、沈阳朝阳……完全违背级联逻辑。
- 真实场景只允许「在当前可操作层级」内搜索：比如已选“广东”，才允许搜“深圳”“东莞”；未选省时，搜索框应禁用或提示“请先选择省份”
- 不要监听全局
input事件做全量树遍历，性能差且路径不明确；应只对当前激活的select或下拉面板的options进行过滤 - 若用 LayUI 的
cascader，它本身不支持分层搜索，filterable是全路径模糊匹配，必须配合props中的value和label字段精准映射，否则搜“北京”可能命中“北京市朝阳区”的完整字符串，而非仅“北京”节点
原生 select + 搜索联动：清空逻辑必须带防抖和状态快照
用 <select></select> 实现三级联动时加搜索，最容易出问题是：用户快速输入又删掉，导致第二级 select 的 options 被反复重写，value 丢失、DOM 渲染卡顿、甚至触发两次 change。
- 每次搜索前，先保存当前已选的上级 value（如
provinceSelect.value），避免异步返回后误填到错误父级下 - 用
setTimeout做简单防抖（300ms），取消上一次未完成的请求；不要用fetch().then()链式写法，改用AbortController（现代浏览器）或标志位（IE11 兼容）中断旧请求 - 清空下级
select时，别只清innerHTML，还要手动设secondSelect.value = ''，否则表单提交时仍会带上旧值 - 搜索结果渲染完，立即调用
secondSelect.focus()并滚动到顶部，避免用户输完看不到匹配项
LayUI cascader.search() 不是标准 API，别硬套
查文档或 Stack Overflow 时容易看到有人写 cascader.search("关键词")，这是错的。LayUI 2.5.6 官方 API 中根本没有这个方法，cascader 实例只有 render、reload、setValue 等几个方法。
- 所谓“搜索”功能，实际要靠自定义面板：关闭默认下拉，用
trigger绑定点击事件，弹出自定义<div class="cascader-search-panel">，里面放 <code><input type="search">+ 动态<ul></ul>列表 - 搜索数据源必须是扁平化结构（如
citiesByProvinceCode映射表），不能现场递归遍历整棵树，否则输入延迟明显 - 匹配时注意区分大小写和中文字符：用
text.includes(keyword)不够鲁棒，建议转成小写再比，或用String.prototype.indexOf()配合toLocaleLowerCase()
最常被忽略的一点：搜索结果点击后，必须显式调用 cascader.setValue([pid, cid, did]) 并触发 change 事件，否则表单校验拿不到值，form.on('submit') 里也取不到最新选择。这步漏了，整个搜索就只是个“看起来能用”的假功能。
