用js、react写了一个带搜索框的多选择器，附完整代码

效果图

完整代码

App.js

import React, { Component } from "react";
import { Input, Checkbox } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import _ from "lodash";
import "antd/dist/antd.css";
import "./App.css"
const selectData = ["test1","test2","test3","test4"];
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectValues: ["test1"],
      inputValue: "",
      showCheckGroup: false,
      indeterminate: true,
      checkAll: false
    };
    this.deleteSelectSiteId = this.deleteSelectSiteId.bind(this);
    this.onSelectChange = this.onSelectChange.bind(this);
  }
  onSelectChange(value) {
    console.log("value===value.length",value,value.length);
    console.log("this.selectData",selectData)
    this.setState({
      selectValues: value,
      indeterminate: !!value.length && value.length < selectData.length,
      checkAll: value.length === selectData.length,
    });
  }
  handleInputChange(data) {
    console.log("data", data)
    this.setState({ inputValue: data })
  }
  deleteSelectSiteId(key) {
    const newSelectValues = this.state.selectValues;
    newSelectValues.splice(key, 1);
    this.setState({ selectValues: newSelectValues, inputValue: "" });
  }
  renderValueItem({ value, key }) {
    return (
      

        {value}{' '}
         this.deleteSelectSiteId(key)}
        />
      
    );
  }
  onCheckAllChange = e => {
    console.log("e.target.checked",e.target.checked)
    this.setState({
      inputValue: "",
      indeterminate: false,
      checkAll: e.target.checked,
    });
    if (e.target.checked) {
      this.setState({ selectValues: selectData });
    } 
    else {
      this.setState({ selectValues: [""] });
    }
  };
  render() {
    return (
      
 { this.setState({ showCheckGroup: true }) }}
      >
        

          {
            this.state.selectValues.length > 0 ?
              this.state.selectValues.map((value, key) => {
                return this.renderValueItem({ value, key });
              })
              : 

          }
        
        {
          this.state.showCheckGroup &&
          
 { this.setState({ showCheckGroup: false }) }}
          >
             { this.handleInputChange(e.target.value) }} />
            
              All
            
            

            
              {selectData.map((sel, i) => {
                return (
                  
                    {sel}
                  
                );
              })}
            
          
        }
      
    );
  }
}
export default App;

App.css

.selectContainer{position: relative;border: 1px solid #d9d9d9;border-radius: 4px;height: 32px;padding: 0 15px 0 10px;display: inline-block;}
.selectBox{ background-color: #fafafa;padding: 0 10px 0 10px;border: 1px solid #e8e8e8;
  border-radius: 2px;display: inline-block;margin-left: 5px}
.CloseOutlined{color: rgba(0, 0, 0, 0.45); font-weight: bold; font-size: 12px;}
.selectValue{font-size: 14px; color: rgba(0, 0, 0, 0.65);
  margin-right: 4px;
  height: auto;}
.selectValuesBox{margin-top: 3px;}
.Checkbox{margin-left: 8px;}
.CheckboxGroupBox{margin-top: 4px;margin-left: -12px;background-color: #fff;z-index: 999;
  position: absolute;border: 1px solid #d9d9d9;top: 100%;border-radius: 4px;width:240px;
}
.selectInputSearch{width: 214px;margin-top: 20px;margin-bottom: 10px;margin-left: 8px;border-radius: 4px;}
.blanck_SelectBox{display: inline-block;margin-left: 5px;padding: 0 10px 0 10px;}