Layui select 的 lay-search 搜索框内容会丢失，因其被设计为临时控件：每次 form.render('select') 重建 DOM、选中选项后主动清空、且无官方 API 读写值；需通过 data-search-cache 缓存并委托监听恢复。
Layui 的 select 组件开启 lay-search="" 后，搜索匹配是实时的，但默认行为是：一旦用户点击某个选项、或失焦、或重新渲染表单（如 form.render('select')），搜索框内容就会清空。这不是 bug，而是 Layui 源码中对搜索输入框的 DOM 管理逻辑决定的——它把搜索框当作临时交互控件，不持久化值。
为什么 search 输入框内容会丢失
Layui 在渲染 select 时，会动态插入一个 <input type="text" class="layui-select-search"> 元素，并绑定 keyup 和 blur 事件。关键点在于：
- 每次
form.render('select')都会重建整个下拉结构（包括这个 input），旧值自然丢失 - 选中 option 后，Layui 主动调用
input.value = ''清空搜索框（见form.js中selectChoose相关逻辑） - 没有暴露官方 API 用于读写该搜索框的 value
手动保存并恢复搜索框值的实操方式
最直接有效的方式是监听搜索框的输入，在每次变化时缓存到变量或 DOM dataset 中，再在需要时主动赋值回去。注意必须等 Layui 完成 DOM 插入后再操作：
- 使用
form.on('select(*)', ...)不起作用——它只响应 option 选择，不响应搜索 - 正确做法是用事件委托监听
.layui-select-search，并在form.render()后重置 - 缓存建议用
data-search-cache属性挂载到 select 原生元素上，避免全局变量污染
示例代码：
// 假设 select 的 lay-filter="city"
form.on('render', function() {
// 等待 Layui 渲染完成（可加 setTimeout(0) 更稳妥）
setTimeout(function() {
$('select[lay-filter="city"]').each(function() {
const $sel = $(this);
const cache = $sel.data('search-cache') || '';
const $search = $sel.siblings('.layui-select').find('.layui-select-search');
if ($search.length && cache) {
$search.val(cache);
}
});
});
});
// 实时缓存搜索值
$(document).on('input', '.layui-select-search', function() {
const $search = $(this);
const $select = $search.closest('.layui-select').prev('select');
$select.data('search-cache', $search.val());
});
render 后自动恢复的兼容性注意事项
这个方案在多数场景下可行，但要注意几个边界情况：
- 如果页面有多个同名
lay-filter的 select，需改用唯一 id 或其他标识区分 - Layui 2.8+ 版本中，
.layui-select-search可能被包裹在.layui-unselect内，选择器要相应调整为.layui-select .layui-select-search - 动态添加的 select（如 AJAX 加载后 append），需在插入 DOM 后立即调用一次缓存恢复逻辑，不能只依赖
form.on('render') - 用户点击「清空」按钮（如果有自定义）时，记得同步清除
$select.data('search-cache')
真正容易被忽略的是：Layui 并不保证搜索框 DOM 的稳定生命周期，它可能在任意一次 form.render()、element.init() 或组件内部状态变更时被销毁重建。所以任何依赖其引用的操作，都必须带“查找 + 判断存在”的兜底逻辑，不能假设 $search[0] 一定可用。
