需求： 根据用户输入字段，动态筛选数据下拉框，筛选不到的保留用户输入，进行模糊搜索。

image.png

作为前端，不能一味只靠后端接口来完成各类需求交互，特别是这种操作频繁又重复利用数据的情况，坚决做好前端优化，尽可能更少的去发送http请求，提升页面渲染速度！

例如后端接口返回所有的数据：

dataSource: [
        {
          id: 2,
          name: "杭州科技公司2",
        },
        {
          id: 38,
          name: "订单xxx公司",
        },
        {
          id: 37,
          name: "杭州xx分局",
        },
        {
          id: 29,
          name: "杭州科技股份公司",
        },
      ],

代码部分：

this.state = {
      isOpen: false,
      dataSource: [],
      organOptions: [],
    };

componentWillReceiveProps(nextProps) {
    if (nextProps.nameOptions.length) {
      let organOptions = nextProps.nameOptions.map((item) => ({
        id: item.id,
        name: item.name,
      }));
      this.setState({
        organOptions,
        dataSource: organOptions,
      });
    }
  }

onSearchOrganize = (value) => {
   // 节流
    clearTimeout(this.timer);
    if (!value) {
      this.setState({ organOptions: this.state.dataSource });
    }
    this.timer = setTimeout(() => {
      let selectOptions = this.state.organOptions.filter((item) =>
        item.name.includes(value)
      );
      this.setState({
        organOptions: selectOptions.length
          ? selectOptions
          : this.state.dataSource,
        isOpen: Boolean(selectOptions.length),
      });
    }, 200);
  }

 onFocus = () => {
    this.setState({ isOpen: true });
  }

  onBlur = () => {
    this.setState({ isOpen: false });
  }


// render部分：
<AutoComplete
    onSearch={this.onSearchOrganize}
    placeholder="请输入组织名称"
    allowClear
    open={isOpen}
    onFocus={this.onFocus}
    onBlur={this.onBlur}
    >
     {organOptions.map((item) => (
        <Option key={item.id}>{item.name}</Option>
     ))}
</AutoComplete>

欢迎各路大佬提提意见，多多指点~