sagacloud-manager-control/src/components/SearchInput/index.tsx

import React, { useEffect, useState } from 'react';
import styles from './index.less';
import { Select } from 'antd';
import useMapList from '@/hooks/useMapList';
import { SearchOutlined } from '@ant-design/icons';

type mapResType = {
  text: string;
  value: string;
};
const { Option } = Select;

type SearchInputProps = {
  onSearch: (s: string) => void;
};
const SearchInput: React.FC<SearchInputProps> = ({ onSearch }) => {
  const mapList = useMapList();
  const [resData, setResData] = useState<mapResType[]>([]);
  const [value, setValue] = useState<any>();

  const handleSearch = (value: string) => {
    //debugger;
    if (value) {
      let data: mapResType[] = [];
      mapList.map((item, index) => {
        if (item.localName.indexOf(value) > -1) {
          data.push({
            text: item.localName,
            value: item.localName,
          });
        }
        setResData(data);
      });
    } else {
      setResData([]);
    }
  };

  const handleChange = (sel: string) => {
    setValue(null); //清空输入的值
    setResData([]); //清空搜索匹配列表
    onSearch(sel);
  };
  return (
    <div className={styles.headerSearch}>
      <SearchOutlined style={{ fontSize: 16 }} />
      <Select
        showSearch
        value={value}
        placeholder="搜索空间"
        defaultActiveFirstOption={false}
        showArrow={false}
        filterOption={false}
        onSearch={handleSearch}
        onChange={handleChange}
        notFoundContent={null}
        bordered={false}
        style={{ width: 150, borderColor: '#c4c4c4' }}
        //   suffixIcon={
        //     <AudioOutlined
        //       style={{
        //         fontSize: 16,
        //         color: '#1890ff',
        //       }}
        //     />
        //   }
      >
        {resData.map(function (item, index) {
          return <Option key={item.value}>{item.text}</Option>;
        })}
      </Select>
    </div>
  );
};

export default SearchInput;