layui form select搜索功能 layui如何给下拉框增加搜索-Layui教程-PHP中文网

能，但需注意版本与写法：Layui 2.9.16起lay-search支持配置对象控制大小写敏感等，此前仅布尔开关；常见错误是未套layui-form或使用旧版。

能，但得看版本和写法。layui 2.9.16 是分水岭：之前 lay-search 只是布尔开关，之后它支持传配置对象，比如大小写敏感、模糊匹配逻辑全靠它控制。

常见错误现象：加了 lay-search="" 没反应 → 很可能外层没套 layui-form；或者用了旧版 Layui（

必须确保 <select></select> 在 <form class="layui-form"></form> 内，否则原生搜索不触发
2.9.16+ 推荐写成 lay-search="{caseSensitive: false, fuzzy: true}"，而不是仅 lay-search
fuzzy: true 表示支持子串匹配（如输“京”能匹配“北京市”），默认是 false（全字匹配）
注意兼容性：该高级配置仅在 2.9.16+ 生效，低版本会静默降级为简单搜索

原生 lay-search 不提供「新增选项」能力，必须自己监听输入框失焦，再判断、追加、重渲染。

关键陷阱在于：Layui 渲染后，真实 <select></select> 被隐藏，表层是 <div class="layui-input">，所以不能直接给 <code><select></select> 绑事件，得代理到 body 或父容器。

用 $('body').on('blur', '.layui-input', ...) 捕获失焦，避免动态生成的 input 绑定失效
通过 $(e.currentTarget).closest('.layui-form-select').prev('select') 找到对应原始 select 元素
新增前务必 .filter(function(){ return $(this).text().trim() === inputValue }) 去重，否则重复点几次就炸出一堆相同 option
追加完必须调 form.render('select')，否则新选项不出现在下拉里

不能。原生搜索只做前端过滤，数据量一大就卡死，且无法支持关键词请求 API。

这时候得换方案：要么用 formSelects 插件（官方生态最稳），要么自己手写带防抖的 fetch + render 流程。

formSelects 的 data(id, 'server', { url: '/api/options', keyword: 'name' }) 会自动拼参、防抖、加载中状态管理
自己实现时，input 用 oninput + setTimeout 防抖，延迟 300ms 再发请求，避免高频刷接口
返回数据必须是数组，每项含 name 和 value 字段，否则 formSelects 解析失败
远程搜索时，禁用原生 lay-search，否则本地过滤和远程结果会冲突

HTML 属性 xm-select-create 是开关，JS 配置里的 create 函数才是逻辑主体 —— 它决定「用户输的新内容」最终变成什么值存进表单。

典型翻车点：只开了属性但没写回调，结果新增项 value 是空字符串或 undefined，提交时报校验失败。

xm-select-create 属性只是告诉插件“允许创建”，不提供任何转换逻辑
create: function(id, name) { return name.trim(); } 才真正把输入文本转成 value，建议加 trim() 防空格污染
如果需要生成 UUID 或服务端 ID，这里应返回占位符（如 "new_"+Date.now()），等表单提交后再异步补全
多选场景下，create 返回的 value 必须唯一，否则多次添加同一文本会导致覆盖而非追加

原生搜索够用就别动，但只要涉及「新增」「远程查」「分组」「权限树」，formSelects 就不是可选项，而是必选项——它的 data 加载机制和 closed 监听器，才是真正能落地的生产级方案。