如何在AG Grid快速筛选中使用逗号搜索多个值？

默认的setQuickFilter会将输入值作为整体匹配，无法直接实现逗号分隔多值的OR筛选逻辑。你可以通过自定义快速过滤比较器来实现需求：

步骤1：定义自定义过滤比较器 #

该函数会将输入的逗号分隔值拆分成数组，检查单元格值是否包含任意一个过滤项：

function customQuickFilterComparator(filterValue, cellValue) {
  // 过滤值为空时，显示所有行
  if (!filterValue) return true;
  
  // 拆分过滤值为数组，去除首尾空格并过滤空项（兼容"aa, bb,  "这类输入）
  const filterItems = filterValue.split(',').map(item => item.trim()).filter(item => item);
  
  // 无有效过滤项时，显示所有行
  if (filterItems.length === 0) return true;
  
  // 将单元格值转为小写字符串，统一匹配规则（大小写不敏感）
  const cellText = cellValue ? String(cellValue).toLowerCase() : '';
  
  // 检查是否有任意一个过滤项匹配单元格内容
  return filterItems.some(item => cellText.includes(item.toLowerCase()));
}

步骤2：配置AG Grid使用自定义比较器 #

在你的gridOptions中添加该比较器配置：

this.gridOptions = {
  // 其他原有配置...
  quickFilterTextComparator: customQuickFilterComparator
};

步骤3：保留原有过滤触发逻辑 #

你的onFilterTextBoxChanged函数无需修改，setQuickFilter会自动使用我们定义的比较器：

onFilterTextBoxChanged(value) {
  this.gridOptions.api.setQuickFilter(value);
}

效果说明 #

• 输入aa,bb,cc：筛选出包含aa、bb或cc任意一个值的行
• 输入aa, bb（带空格）：自动去除空格后正常匹配
• 输入空字符串/全空格：显示所有行
• 如需区分大小写，移除代码中的.toLowerCase()即可

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