layui穿梭框搜索：左右面板搜索与过滤-优快云博客

layui穿梭框搜索：左右面板搜索与过滤

【免费下载链接】layui 一套遵循原生态开发模式的 Web UI 组件库，采用自身轻量级模块化规范，易上手，可以更简单快速地构建网页界面。项目地址: https://gitcode.com/GitHub_Trending/la/layui

还在为海量数据穿梭而烦恼？layui穿梭框的智能搜索功能帮你快速定位目标数据，实现高效的双向筛选与转移！

为什么需要穿梭框搜索功能？

在现代Web应用中，数据管理往往面临这样的挑战：

数据量庞大，手动查找耗时耗力
需要从大量候选项中精确筛选目标
左右面板数据需要实时同步过滤
用户期望快速、直观的操作体验

layui穿梭框（Transfer）组件正是为解决这些问题而生，其内置的搜索功能让数据穿梭变得轻松高效。

基础搜索配置

开启搜索功能

layui穿梭框的搜索功能通过 showSearch 属性控制，支持三种模式：

<div id="transfer-demo"></div>

<script>
layui.use(function(){
  var transfer = layui.transfer;
  
  // 示例数据
  var data = [
    {"value": "1", "title": "JavaScript"},
    {"value": "2", "title": "TypeScript"},
    {"value": "3", "title": "Python"},
    {"value": "4", "title": "Java"},
    {"value": "5", "title": "Go"},
    {"value": "6", "title": "Rust"},
    {"value": "7", "title": "PHP"},
    {"value": "8", "title": "Ruby"},
    {"value": "9", "title": "Swift"},
    {"value": "10", "title": "Kotlin"}
  ];

  // 基础搜索配置
  transfer.render({
    elem: '#transfer-demo',
    data: data,
    showSearch: true, // 开启搜索（不区分大小写）
    title: ['所有语言', '已选语言']
  });
});
</script>

搜索模式对比

layui提供三种搜索模式，满足不同场景需求：

模式	配置值	描述	适用场景
关闭搜索	`false`	不显示搜索框	数据量少或无需搜索
不区分大小写	`true`	默认模式，忽略大小写	大多数通用场景
区分大小写	`'cs'`	严格匹配大小写	需要精确匹配的场景

// 区分大小写搜索配置
transfer.render({
  elem: '#transfer-cs',
  data: data,
  showSearch: 'cs', // 区分大小写搜索
  title: ['严格匹配', '选中项']
});

搜索功能深度解析

搜索实现原理

layui穿梭框的搜索功能基于实时过滤机制：

mermaid

核心搜索算法

搜索功能的实现位于transfer组件的keyup事件处理中：

// 搜索逻辑核心代码
that.laySearch.find('input').on('keyup', function(){
  var value = this.value;
  var thisDataElem = $(this).parents('.'+ ELEM_SEARCH).eq(0).siblings('.'+ ELEM_DATA);
  var thisListElem = thisDataElem.children('li');

  thisListElem.each(function(){
    var thisList = $(this);
    var thisElemCheckbox = thisList.find('input[type="checkbox"]');
    var title = thisElemCheckbox[0].title;

    // 是否区分大小写
    if(options.showSearch !== 'cs'){
      title = title.toLowerCase();
      value = value.toLowerCase();
    }

    var isMatch = title.indexOf(value) !== -1;
    thisList[isMatch ? 'removeClass': 'addClass'](HIDE);
    thisElemCheckbox.data('hide', isMatch ? false : true);
  });

  that.renderCheckBtn();
});

高级搜索应用场景

场景一：用户权限管理

<div id="transfer-permission"></div>

<script>
layui.use(function(){
  var transfer = layui.transfer;
  
  // 权限数据
  var permissionData = [
    {"value": "user_read", "title": "用户读取权限"},
    {"value": "user_write", "title": "用户写入权限"},
    {"value": "user_delete", "title": "用户删除权限"},
    {"value": "role_manage", "title": "角色管理权限"},
    {"value": "system_config", "title": "系统配置权限"},
    {"value": "log_view", "title": "日志查看权限"},
    {"value": "data_export", "title": "数据导出权限"},
    {"value": "api_access", "title": "API访问权限"}
  ];

  transfer.render({
    elem: '#transfer-permission',
    data: permissionData,
    showSearch: true,
    title: ['所有权限', '已分配权限'],
    text: {
      none: '暂无权限数据',
      searchNone: '未找到匹配权限'
    },
    value: ["user_read", "log_view"] // 初始已选权限
  });
});
</script>

场景二：商品分类筛选

// 商品分类穿梭框
var categoryData = [
  {"value": "1", "title": "数码产品", "disabled": false},
  {"value": "2", "title": "家用电器", "disabled": false},
  {"value": "3", "title": "服装鞋帽", "disabled": false},
  {"value": "4", "title": "美妆护肤", "disabled": false},
  {"value": "5", "title": "食品生鲜", "disabled": false},
  {"value": "6", "title": "图书文具", "disabled": false},
  {"value": "7", "title": "运动户外", "disabled": false},
  {"value": "8", "title": "母婴玩具", "disabled": false}
];

transfer.render({
  elem: '#transfer-category',
  data: categoryData,
  showSearch: 'cs', // 区分大小写，确保准确匹配
  title: ['所有分类', '已选分类'],
  height: 400,
  width: 250
});

搜索功能的最佳实践

1. 性能优化建议

对于大数据量的场景，建议采用以下优化策略：

// 防抖处理搜索输入
var searchTimer;
that.laySearch.find('input').on('keyup', function(){
  clearTimeout(searchTimer);
  searchTimer = setTimeout(function(){
    // 执行搜索逻辑
    // ...搜索代码...
  }, 300); // 300ms延迟
});

2. 自定义搜索逻辑

通过继承和扩展，可以实现更复杂的搜索功能：

// 自定义搜索处理
var customTransfer = {
  search: function(keyword, data) {
    return data.filter(function(item) {
      // 支持多字段搜索
      return item.title.includes(keyword) || 
             item.value.includes(keyword) ||
             (item.desc && item.desc.includes(keyword));
    });
  }
};

3. 搜索状态管理

// 记录搜索状态
var searchState = {
  left: { keyword: '', results: [] },
  right: { keyword: '', results: [] }
};

// 更新搜索状态
function updateSearchState(side, keyword, results) {
  searchState[side] = { keyword, results };
}

常见问题与解决方案

Q1: 搜索框不显示怎么办？

A: 确保 showSearch 属性设置为 true 或 'cs'，并检查CSS是否正确加载。

Q2: 搜索性能较差如何处理？

A: 对于超大数据集，建议：

实现分页加载
添加防抖处理
使用Web Worker进行后台搜索

Q3: 如何自定义搜索匹配规则？

A: 可以通过重写搜索逻辑或使用 parseData 回调进行数据预处理。

Q4: 搜索时如何保持选中状态？

A: layui自动处理选中状态的保持，搜索时已选项目不会丢失。

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Layui Transfer搜索功能示例</title>
  <link href="https://cdn.jsdelivr.net/npm/layui@2.9.3/dist/css/layui.css" rel="stylesheet">
</head>
<body>

<div class="layui-container">
  <div class="layui-row">
    <div class="layui-col-md8 layui-col-md-offset2">
      <h2>layui穿梭框搜索功能演示</h2>
      
      <div class="layui-form">
        <div class="layui-form-item">
          <label class="layui-form-label">搜索模式</label>
          <div class="layui-input-block">
            <select name="searchMode" lay-filter="searchMode">
              <option value="false">关闭搜索</option>
              <option value="true" selected>不区分大小写</option>
              <option value="cs">区分大小写</option>
            </select>
          </div>
        </div>
      </div>

      <div id="transfer-demo"></div>

      <div class="layui-card">
        <div class="layui-card-header">已选数据</div>
        <div class="layui-card-body" id="selected-data">
          暂无选中数据
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/layui@2.9.3/dist/layui.js"></script>
<script>
layui.use(['transfer', 'form', 'util'], function(){
  var transfer = layui.transfer;
  var form = layui.form;
  var util = layui.util;
  
  // 示例数据
  var demoData = [
    {"value": "1", "title": "JavaScript高级编程"},
    {"value": "2", "title": "TypeScript实战指南"},
    {"value": "3", "title": "Python数据分析"},
    {"value": "4", "title": "Java核心技术"},
    {"value": "5", "title": "Go语言并发编程"},
    {"value": "6", "title": "Rust系统编程"},
    {"value": "7", "title": "PHP现代开发"},
    {"value": "8", "title": "Ruby on Rails"},
    {"value": "9", "title": "Swift移动开发"},
    {"value": "10", "title": "Kotlin安卓开发"},
    {"value": "11", "title": "Vue.js前端框架"},
    {"value": "12", "title": "React状态管理"},
    {"value": "13", "title": "Angular企业应用"},
    {"value": "14", "title": "Node.js后端开发"},
    {"value": "15", "title": "Docker容器技术"}
  ];

  // 初始化穿梭框
  var transferInst = transfer.render({
    elem: '#transfer-demo',
    data: demoData,
    showSearch: true,
    title: ['所有技能', '已掌握技能'],
    id: 'skillTransfer',
    height: 300,
    text: {
      none: '暂无技能数据',
      searchNone: '未找到匹配技能'
    },
    onchange: function(data, index){
      updateSelectedData();
    }
  });

  // 更新选中数据显示
  function updateSelectedData() {
    var selectedData = transfer.getData('skillTransfer');
    var html = selectedData.length ? 
      selectedData.map(function(item) {
        return '<span class="layui-badge">' + item.title + '</span>';
      }).join(' ') : '暂无选中数据';
    
    document.getElementById('selected-data').innerHTML = html;
  }

  // 搜索模式切换
  form.on('select(searchMode)', function(data){
    transfer.reload('skillTransfer', {
      showSearch: data.value === 'false' ? false : data.value
    });
  });

  // 实时显示搜索技巧
  util.on('keyup', {
    '#transfer-demo input[type="text"]': function(){
      var keyword = this.value;
      if(keyword.length > 0) {
        console.log('正在搜索:', keyword);
      }
    }
  });
});
</script>

<style>
.layui-transfer-box {
  margin: 10px 0;
}
.layui-badge {
  margin: 2px;
}
</style>

</body>
</html>

总结

layui穿梭框的搜索功能为数据管理提供了强大的筛选能力，通过灵活的配置选项和智能的匹配算法，能够满足各种复杂场景的需求。无论是简单的关键字搜索还是精确的大小写匹配，layui都提供了完善的解决方案。

关键优势：

🚀 实时搜索，即时反馈
⚙️ 多种匹配模式，灵活配置
🎯 精确的数据过滤和状态管理
💡 简洁的API设计，易于集成
📱 响应式设计，移动端友好

掌握layui穿梭框的搜索功能，将显著提升你的数据管理效率和用户体验！

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考