layui transfer组件原生showSearch仅支持单搜索框和全局匹配，无法实现左右面板独立搜索；需禁用showSearch，手动添加两个输入框，通过DOM显隐控制实现独立过滤，避免reload导致选中状态丢失。
layui 的 transfer 组件原生只支持单搜索框、单向过滤，左右面板无法独立搜索——这是最常被误用的点。想实现“左搜左、右搜右”，必须绕过 showsearch: true，手动插入两个输入框并控制 dom 渲染。
为什么 showSearch: true 不能满足左右独立搜索？
启用后仅在左侧面板顶部渲染一个 <input>，右侧面板完全无搜索入口；且搜索逻辑是「对原始 data 全局匹配 → 按当前分布状态重新分配到左右面板」，并非真正意义上的双列表独立过滤。用户输入时看到右面板内容变化，只是因为匹配项恰好被分到了右边，不是右面板自己在搜索。
常见错误现象：
- 右侧已有数据，但搜索框一输关键词，右侧条目突然消失或错乱
- 点击右面板某项，左侧同名项也被高亮（因共用同一份匹配结果）
- parseData 里加过滤逻辑无效——它只在初始化或 reload() 时执行一次，不响应实时输入
如何手动实现左右独立搜索？
核心思路：禁用原生搜索，用原生 DOM + 事件监听 + 局部重绘，避免调用 transfer.reload()（会清空选中状态）。
-
showSearch: false关闭内置搜索 - 在左右面板容器（
.layui-transfer-box）上方各插入一个<input type="text" class="search-left">和<input type="text" class="search-right"> - 监听
input事件，分别调用自定义过滤函数，例如：filterAndRender('left', value) - 过滤时需显式排除
disabled: true的项（否则它们仍会出现在搜索结果中，但不可选，造成体验困惑） - 重绘推荐用
display: none/block控制.layui-transfer-item显隐，比reload()更轻量、不丢选中态
filterAndRender() 函数怎么写才靠谱？
关键不是全量重载，而是精准控制可见性。示例逻辑如下（注意变量作用域和原始数据引用）：
function filterAndRender(side, keyword) {
const box = document.querySelector('.layui-transfer-box.' + side);
const items = box.querySelectorAll('.layui-transfer-item');
const originalData = transfer.getData('demo1'); // 必须提前缓存原始 data
<p>items.forEach(item => {
const value = item.dataset.value;
const itemData = originalData.find(d => d.value === value);
const match = itemData &&
itemData.title.includes(keyword) &&
itemData.disabled !== true;</p><pre class='brush:php;toolbar:false;'>item.style.display = match ? 'block' : 'none';}); }
要点：
- 不依赖 transfer.getChecked()，它只返回当前选中值，不包含全部原始数据
- dataset.value 是 layui 渲染时自动写入的，可安全用于反查
- 若需保留 disabled 项在搜索中隐藏，必须加 itemData.disabled !== true 判断
容易被忽略的兼容性细节
layui 2.8+ 版本中，.layui-transfer-item 的结构可能嵌套更深（如含 .layui-form-checkbox），直接操作 style.display 可能导致 checkbox 样式错位。此时应改为操作其父级容器，或使用 classList.toggle('layui-hide') 配合 CSS 规则。另外，若数据量超 500 条，纯 DOM 显隐会卡顿，建议改用虚拟滚动或服务端分页——layui 原生不支持虚拟滚动，这点必须提前规划。
