原生 lay-search 需满足 layui ≥ 2.9.16、 套在 form.layui-form 内、未禁用渲染三条件;2.9.16 后支持对象配置,此前仅认布尔值;模糊搜索与大小写敏感直接影响匹配逻辑,且不支持搜索新增选项。
原生 lay-search 能开搜索,但必须满足三个硬条件:layui ≥ 2.9.16、<select></select> 套在 form.layui-form 内、没手动禁用渲染。否则白配。
lay-search 属性写法与版本兼容性
2.9.16 是分水岭 —— 之前只认布尔值(lay-search 或 lay-search=""),之后支持传配置对象。低版本写成对象会静默失效,不报错也不生效。
-
lay-search(无值)或lay-search="":启用默认搜索(前缀匹配、忽略大小写) -
lay-search="{fuzzy: true}":开启子串匹配,输“京”能命中“北京市” -
lay-search="{caseSensitive: true, fuzzy: false}":严格大小写 + 全字匹配 - 旧版(如 2.8.x)写
lay-search="{...}"会被当空字符串处理,降级为简单搜索
搜索没反应?先查这三个地方
最常见“加了属性却没搜索框”的原因不是代码错,而是环境没搭对。
- 外层缺
form.layui-form或div.layui-form:Layui 的 form 模块只扫描这个 class 下的表单元素 -
form.render()漏调或调早:动态插入<select></select>后必须显式调用,否则 lay-search 不生效 - 用了自定义主题或魔改 CSS:某些定制版 CSS 把
.layui-form-select .layui-input的display设成了none,导致输入框不可见
模糊搜索(fuzzy)和大小写敏感(caseSensitive)的实际影响
这两个开关不是“锦上添花”,而是直接影响匹配结果集。尤其在中英文混排或缩写场景下,选错会导致用户根本搜不到。
-
fuzzy: true:启用String.prototype.includes()级别匹配,适合地名、人名、标签类文本 -
fuzzy: false(默认):等价于String.prototype.startsWith(),只匹配开头,输“海”能出“上海”,但搜“海上”就挂了 -
caseSensitive: true:对 API 返回的字段名、编码值等区分大小写的场景必要;日常中文基本不用开 - 两者组合时,优先级是先做大小写判断,再做模糊/前缀判断
想让用户输完直接新增选项?原生 lay-search 不行
lay-search 只负责过滤,不提供创建入口。所谓“搜不到就加新项”,得自己补逻辑,而且有坑:
- 不能监听
<select></select>的blur:渲染后真实<select></select>被隐藏,表层是<div class="layui-input"> <li>正确做法:用 <code>$('body').on('blur', '.layui-input', ...)捕获失焦,再通过$(e.currentTarget).closest('.layui-form-select').prev('select')找到原始 select - 追加前必须去重:
$(select).find('option').filter(function(){ return $(this).text().trim() === inputValue }),否则重复点几次就炸出一堆相同 option - 追加完立刻调
form.render('select'),否则新选项不会出现在下拉列表里
真正需要“搜索即创建”或远程加载的场景,别硬刚原生 lay-search。formSelects 插件的 data(id, 'server', {...}) 或 xmSelect 的 filter 函数才是稳解 —— 它们把防抖、loading、空状态、数据格式校验都包圆了,原生方案只是个过滤壳子。











