如何在ag grid下拉菜单中添加搜索栏

import React, { useState, useEffect } from 'react';
import Select from 'react-select';

const CustomSelectEditor = ({ value, onValueChange, options }) => {
  const [filteredOptions, setFilteredOptions] = useState(options);

  useEffect(() => {
    // 初始化时显示所有选项
    setFilteredOptions(options);
  }, [options]);

  const handleInputChange = (inputValue) => {
    // 根据输入值过滤选项
    const filtered = options.filter(option =>
      option.label.toLowerCase().includes(inputValue.toLowerCase())
    );
    setFilteredOptions(filtered);
  };

  const handleChange = (selectedOption) => {
    onValueChange(selectedOption ? selectedOption.value : null);
  };

  return (
    <Select
      value={value}
      options={filteredOptions}
      isClearable={true}
      onInputChange={handleInputChange}
      onChange={handleChange}
    />
  );
};

export default CustomSelectEditor;

const columnDefs = [
  {
    headerName: 'Dropdown Column',
    field: 'dropdown',
    editable: true,
    cellEditor: 'customSelectEditor',
    cellEditorParams: {
      suppressFilter: true,
      cellEditor: 'customSelectEditor',
    },
    // 其他列定义...
  },
  // 其他列定义...
];

const gridOptions = {
  frameworkComponents: {
    customSelectEditor: CustomSelectEditor,
  },
  // 其他配置...
};

// 在渲染表格的地方，使用columnDefs和gridOptions
// <AgGridReact columnDefs={columnDefs} gridOptions={gridOptions} />