React中AgGrid的agRichSelectCellEditor对象数组选项搜索失效求助

当agRichSelectCellEditor使用对象数组作为选项时，默认搜索逻辑无法识别对象属性，导致搜索功能失效。这是因为编辑器默认将选项视为字符串，而非对象，因此需要显式指定搜索时匹配的字段或自定义匹配逻辑。

以下是两种可行方案：

方案一：使用filterValueGetter指定搜索字段 #

通过filterValueGetter返回每个选项中用于搜索匹配的属性值（比如示例中的label字段），让编辑器明确知道用哪个字段做搜索匹配。

修改后的代码：

const [columnDefs, setColumnDefs] = useState([
    {
      headerName: "Allow Typing (MatchAny)",
      field: "color",
      cellEditor: "agRichSelectCellEditor",
      cellEditorParams: {
        values: [{ label: "SpringGreen", value:1},
                 { label: "Tan", value:2},
                 { label: "SteelBlue" ,value:3} ],
        cellRenderer: (params) => {
          return <div>{params?.value?.label}</div>;
        },
        searchType: "matchAny",
        allowTyping: true,
        filterList: true,
        highlightMatch: true,
        valueListMaxHeight: 220,
        // 新增：指定搜索时匹配的字段
        filterValueGetter: (params) => params.value.label
      },
      valueFormatter: (params) => {
        return params.value?.label; // 修正原代码的newValue笔误，正常显示用params.value
      },
    },
  ]);

方案二：使用textMatcher自定义匹配逻辑 #

如果需要更灵活的匹配规则（比如同时匹配label和value），可以用textMatcher自定义匹配函数，完全控制搜索逻辑。

示例代码：

const [columnDefs, setColumnDefs] = useState([
    {
      headerName: "Allow Typing (MatchAny)",
      field: "color",
      cellEditor: "agRichSelectCellEditor",
      cellEditorParams: {
        values: [{ label: "SpringGreen", value:1},
                 { label: "Tan", value:2},
                 { label: "SteelBlue" ,value:3} ],
        cellRenderer: (params) => {
          return <div>{params?.value?.label}</div>;
        },
        searchType: "matchAny",
        allowTyping: true,
        filterList: true,
        highlightMatch: true,
        valueListMaxHeight: 220,
        // 新增：自定义匹配逻辑，同时匹配label和value
        textMatcher: ({ text, item }) => {
          const searchText = text.toLowerCase();
          return item.label.toLowerCase().includes(searchText) || 
                 item.value.toString().includes(searchText);
        }
      },
      valueFormatter: (params) => {
        return params.value?.label;
      },
    },
  ]);

注意事项：

• 确保filterValueGetter返回的是可用于字符串匹配的属性值；使用textMatcher时，记得将非字符串类型的属性（比如数字value）转为字符串再做匹配。
• 原代码中valueFormatter的params.newValue仅在编辑完成时存在，正常单元格显示应使用params.value。

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