antd select 实现可输入可远程检索并选择

组件部分：

import { Select } from 'antd';
const { Option } = Select;

export interface SelectProps {
  searchVal: string;
  setSearchOpt: any[];
  onChangeHandl: (value: any) => void;
  onSearch: (value: any) => void;
}

export default function (props: SelectProps) {
  return (
    <Select
      style={{ paddingRight: 1 }}
      showSearch // 使用单选模式可搜索
      value={props.searchVal} // 选中当前条目，多选返回数组
      placeholder={'公司/组织名称'} // select默认展示的说明
      defaultActiveFirstOption={false} // 是否默认高亮第一个选项
      filterOption={false} // 是否根据输入项进行筛选
      onSearch={props.onSearch} // “文本框值”变化时的回调
      onChange={props.onChangeHandl} // 选中option，或input的value回调
      notFoundContent={null} // 当下拉列表为空时，显示的内容
      allowClear // 是否支持清除
      showArrow={true} // 是否显示select的右侧小图标
    >
      {props.setSearchOpt.map((item: any) => {
        return <Option value={item.value}>{item.name}</Option>;
      })}
    </Select>
  );
}

使用：

 // 检索企业

  const checkOrg = (value: string, callback: Function) => {
    if (timeout) {
      clearTimeout(timeout);
      timeout = null;
    }

    const fake = async () => {
      const data = await setCheckOrg?.({ key: value });
      callback(
        data?.map((t: any) => ({
          name: t?.F_NAME,
          value: t?.F_ORG_ID,
        })),
      );
    };

    if (value) {
      timeout = setTimeout(fake, 300);
    } else {
      callback([]);
    }
  };
 <SelectSearch
            searchVal={searchVal}
            setSearchOpt={searchOpt}
            onChangeHandl={(value: any) => {
              setSearchVal(value);
              console.log(value);
              form.setFieldsValue({ F_ORG_ID: value, F_ORG_NAME: value });
            }}
            onSearch={(value: any) => {
              if (!value) return;
              setSearchVal(value); 
              form.setFieldsValue({ F_ORG_ID: null, F_ORG_NAME: value }); 
              checkOrg(value, setSearchOpt); //远程请求企业
            }}
          />