layui下拉框实现搜索新增需用第三方formselects或手动模拟；formselects v4配置searchtype:'input'、addtext及onsuccess判断空结果并动态添加选项，点击新增项时拦截提交、调接口、刷新数据并set value。
layui下拉框怎么触发搜索后新增选项
原生 layui.select 不支持搜索+新增，必须用 layui.formSelects（第三方扩展）或手动改造 layui.dropdown + input 模拟。直接改官方 select 无法监听搜索关键词，也拿不到「未匹配」状态。
formSelects v4 怎么配置搜索并允许新增
这是目前最稳妥的方案。它基于 layui 封装，原生支持 searchUrl 和 addText，关键在启用 searchType: 'input' 并监听 onSuccess 判断是否为空：
formSelects.data('mySelect', {
searchType: 'input',
addText: '添加 "{0}"',
searchUrl: '/api/tags?k=',
onSuccess: function(id, data) {
if (data && data.length === 0) {
// 搜索无结果，显示“添加 xxx”项
formSelects.option(id, [{name: '添加 "' + this.searchVal + '"', value: 'new_' + this.searchVal}]);
}
}
});
-
searchType: 'input'是前提，'select'类型不触发onSuccess -
this.searchVal只在onSuccess中可用，不能在beforeSearch里读取 -
formSelects.option()动态插入选项时，value最好带前缀（如new_），避免和真实 ID 冲突
点击“添加 X”后怎么提交新标签并选中
单纯加个选项没用，得拦截选择事件，识别新增项并走自定义逻辑：
formSelects.on('mySelect', function(data) {
if (data.value.startsWith('new_')) {
const keyword = data.value.replace('new_', '');
$.post('/api/tags', { name: keyword }, function(res) {
// 成功后刷新下拉项，并真正选中服务器返回的 ID
formSelects.data('mySelect', 'server', '/api/tags?k=' + keyword);
formSelects.value('mySelect', res.id.toString());
});
}
});
- 必须用
formSelects.value()主动设置值，否则 UI 显示“添加 xxx”，但表单提交的是new_xxx - 如果接口返回的是完整对象，注意
res.id类型要和value字段一致（字符串优先） - 别忘了清空输入框：在
$.post成功回调末尾加$('.form-selects-input').val('')
不用插件，纯 layui + input 怎么模拟（极简场景）
只有一两个地方需要，又不想引入 formSelects，可以用 layui.input + layui.dropdown 手动控制：
<div class="layui-input-inline"> <input type="text" id="tagInput" placeholder="输入标签..." class="layui-input"> </div> <div id="tagDropdown" class="layui-dropdown"></div>
核心逻辑是：监听 input 的 input 事件 → 调接口 → 渲染 dropdown 内容 → 点击时判断是否为「新增」项：
- 渲染 dropdown 时，若结果为空，追加一个
<li data-value="new_XXX">添加 "XXX"</li> - dropdown 的
click回调里用$(e.target).data('value')判断是否以new_开头 - 注意
layui.dropdown默认不关闭，需手动调用layui.dropdown.hide()
这种写法绕开了 formSelects，但所有交互、防抖、loading、清空逻辑都得自己补，适合一次性需求。
真正难的不是加按钮，而是区分「用户想选已有项」和「用户想创建新项」——这依赖搜索词实时比对、服务端兜底校验、以及前端 value 命名不冲突。漏掉任意一环，表单就可能提交脏数据。
