如何在Oracle APEX中创建搜索项实现shuttle组件动态筛选

完全可以实现你需要的类自动补全筛选效果，两种常用实现方式如下：

方案1：声明式级联刷新（低代码，稳定兼容所有APEX版本） #

• 新建一个页面文本项，命名可设为P1_SHUTTLE_FILTER，按需开启自动补全功能即可。
• 调整原有Shuttle组件的LOV（值列表）SQL查询，新增过滤条件：

  SELECT 显示字段, 返回值字段
  FROM 你的业务表
  WHERE 显示字段 LIKE '%' || :P1_SHUTTLE_FILTER || '%'
  -- 保留你原有查询的其他过滤条件
  

• 给P1_SHUTTLE_FILTER新增动态动作：触发事件选键释放(Key Release)，执行操作为「刷新」，刷新目标选择Shuttle组件（高版本APEX支持直接刷新单项，低版本可选择Shuttle所在的父区域）。
• 可选优化：给动态动作设置300ms的执行延迟，避免用户输入过程中频繁触发请求，提升使用体验。
• 注：原生刷新操作不会清除Shuttle右侧已经选中的内容，不需要额外做数据保留处理。

方案2：纯前端本地筛选（无服务端请求，响应速度更快） #

适合Shuttle总选项数量小于1000条的场景，全程不需要请求服务端，输入后实时出筛选结果：

• 同样新建文本项P1_SHUTTLE_FILTER，不需要额外配置自动补全。
• 给文本项新增「键释放」触发的动态动作，执行代码选择「JavaScript代码」，填入如下逻辑：

  // 获取输入的筛选值，统一转小写实现不区分大小写匹配
  const filterKeyword = apex.item('P1_SHUTTLE_FILTER').getValue().trim().toLowerCase();
  // 替换为你自己的Shuttle组件静态ID，加_LEFT对应左侧可选列表
  const shuttleLeftSelector = '#PX_MY_SHUTTLE_LEFT';
  
  $(`${shuttleLeftSelector} option`).each(function() {
    const optionText = $(this).text().toLowerCase();
    // 匹配到关键词就显示，不匹配就隐藏
    $(this).toggle(optionText.includes(filterKeyword));
  });
  

如果需要同时筛选Shuttle右侧已选中的列表，只需要在上述JS中新增遍历#PX_MY_SHUTTLE_RIGHT选项的逻辑即可。

内容的提问来源于stack exchange，提问作者Seko sonogo