MultiSelectorSearch

以下是一个简单的 MultiSelectorSearch 组件实现。

MultiSelectorSearch 组件包含一个下拉多选框和一个搜索框，用户可以通过搜索框输入关键词来筛选选项，并且可以选择多个选项。当用户选择了选项后，选项会显示在下拉框中，并且可以通过点击叉号来删除选项。

import React, { useState } from 'react';
import { Select, Input, Tag } from 'antd';

const { Option } = Select;

const options = [
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' },
  { label: '选项4', value: '4' },
  { label: '选项5', value: '5' },
  { label: '选项6', value: '6' },
];

function MultiSelectorSearch() {
  const [selectedValues, setSelectedValues] = useState([]);
  const [searchValue, setSearchValue] = useState('');
  const [optionsToShow, setOptionsToShow] = useState(options);

  const handleSelectChange = (values) => {
    setSelectedValues(values);
  };

  const handleSearch = (value) => {
    setSearchValue(value);

    const filteredOptions = options.filter((option) =>
      option.label.toLowerCase().includes(value.toLowerCase())
    );
    setOptionsToShow(filteredOptions);
  };

  const handleFilterOption = (input, option) =>
    option.label.toLowerCase().includes(input.toLowerCase());

  return (
    <Select
      mode="multiple"
      style={{ width: '100%' }}
      placeholder="请选择"
      value={selectedValues}
      onChange={handleSelectChange}
      filterOption={handleFilterOption}
      showSearch
      onSearch={handleSearch}
      onBlur={() => setSearchValue('')}
    >
      {optionsToShow.map((option) => (
        <Option key={option.value} value={option.value}>
          {option.label}
        </Option>
      ))}
    </Select>
    <div style={{ marginTop: 8 }}>
      {selectedValues.map((value) => (
        <Tag
          key={value}
          closable
          onClose={() =>
            setSelectedValues(selectedValues.filter((v) => v !== value))
          }
        >
          {options.find((option) => option.value === value)?.label}
        </Tag>
      ))}
    </div>
  );
}

export default MultiSelectorSearch;

这个组件支持多选、搜索、删除已选选项等功能。用户可以通过修改 options 数组来设置选项，也可以通过修改 filterOption 函数来控制搜索时的匹配规则。