Elastic UI (EUI) 搜索栏字段值选择过滤器排序优化方案

在Elastic UI（EUI）组件库的搜索栏功能中，字段值选择过滤器（Field Value Selection Filter）默认会将已选中的项目自动排序到列表顶部。这一设计虽然在某些场景下能提升用户体验，但在处理小型选项列表（3-4个项目）时，反而会造成用户困扰——选项位置的频繁跳动反而降低了操作效率。

当前实现机制分析

EUI搜索栏的字段值选择过滤器组件目前采用了一种"智能排序"策略：当用户勾选某些选项时，这些被选中的项目会立即被提升到选项列表的顶部位置。这种设计背后的逻辑是帮助用户快速定位已选择的过滤条件，特别适用于选项数量较多的场景。

问题场景剖析

然而，这种自动排序机制在处理以下场景时会产生负面效果：

1. 小型选项列表：当选项总数较少时（如3-4个），自动排序带来的视觉跳跃感反而会分散用户注意力
2. 固定顺序需求：某些业务场景下，选项本身具有特定的逻辑顺序（如优先级排序、流程步骤等），自动排序会破坏这种既定顺序
3. 肌肉记忆操作：用户可能已经熟悉了选项的固定位置，位置变化会导致操作失误

技术解决方案

通过在字段值选择过滤器的配置选项中新增一个autoSortSelected属性（默认为true保持向后兼容），开发者可以根据实际需求灵活控制排序行为：

{
  type: 'field_value_selection',
  autoSortSelected: false, // 禁用选中项自动排序
  // 其他配置...
}

实现效果对比

启用自动排序（默认）：

• 选中项目立即跳转到列表顶部
• 适合大型选项列表（10+项）
• 便于快速定位已选条件

禁用自动排序：

• 选项保持原始顺序不变
• 适合小型选项列表
• 保持界面稳定性
• 维护业务逻辑顺序

最佳实践建议

1. 对于选项数量超过10个的过滤器，建议保持默认的自动排序行为
2. 当选项具有特定业务含义的顺序时，应禁用自动排序
3. 移动端界面考虑禁用自动排序以减少视觉跳动
4. 高频使用的过滤器界面可考虑禁用以培养用户肌肉记忆

这一改进方案既保留了原有功能的优势，又为特定场景提供了更优的解决方案，体现了EUI组件库一贯的灵活性和可配置性特点。