Layui如何实现穿梭框transfer左右列表的关键字同步搜索-Layui教程-PHP中文网

layui穿梭框showSearch:true仅单向过滤原始data，左右面板不独立搜索；需禁用内置搜索并手动为左右面板各加输入框，通过事件监听+本地过滤+reload或DOM操作实现独立搜索。

showSearch 设为 true 后左右列表不联动搜索？

默认开启 showsearch: true 时，只在左侧面板顶部显示一个搜索框，右侧面板**完全不响应搜索输入**——这是最常被误解的点。layui 的搜索逻辑是单向过滤：仅对原始 data 源做匹配，再根据当前左右分布状态，把匹配项分别渲染到对应面板中。所以你看到“左右都变”其实是数据源匹配后重新分配的结果，不是两个独立搜索框。

如何让左右面板各自独立搜索？

原生 transfer 不支持双搜索框。必须手动干预 DOM 和事件逻辑：

禁用内置搜索：showSearch: false
在左右面板容器内（.layui-transfer-box）上方各插入一个 <input type="text">，并绑定 input 事件
监听时调用 transfer.getChecked('left') 或 transfer.getChecked('right') 获取当前面板选中项，再结合原始 data 做本地过滤
用 transfer.reload() 重载整个组件，或更轻量地操作 .layui-transfer-box .layui-transfer-item 的 style.display

注意：transfer.reload() 会清空当前选中状态，若需保留，得先缓存 value 数组再传回去。

parseData 里做搜索过滤可行吗？

不可行。parseData 只在初始化或 reload() 时执行一次，无法响应实时输入。它适合做字段映射（比如把 id/name 转成 value/title），不适合动态过滤。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

真正要实现「输入即过滤」，必须绕过 parseData，直接操作 DOM 或借助 onchange 回调 + 手动刷新 UI。例如：

transfer.render({
  elem: '#test',
  data: originalData,
  showSearch: false,
  onchange: function(value, type) {
    // type 是 'add' 或 'del'，这里不适合做搜索
  }
});
// 然后自己给左右搜索框加事件：
document.querySelector('.search-left').addEventListener('input', function(e) {
  filterAndRender('left', e.target.value);
});