自动完成搜索框（antd--AutoComplete）

可以搜索的自动完成框

这个自动完成，我把他抽离出来做了一个组件

查询模式，确定类目

 	<AutoCompleteWrapper
          style={{ width: width }}
          options={options}
          onSelect={onSelect}
          onSearch={handleSearch}
          value={inputText}
          backfill={true}
          onChange={changeValue}
        >
          <Input.Search
            size="large"
            placeholder="请输入搜索的内容"
            enterButton
            onSearch={inputSearch}
          />
        </AutoCompleteWrapper>

// 这里是分成四个类型，通过STYPE来区分是什么类型
//监听searchMain，这个是查询结果
useEffect(() => {
    //1-债券;2-发行人;3-地区;4-行业
    //债券
    let bondArr = searchMain
      .filter(item => item.STYPE === '1')
      .map(items => items);
    //发行人
    let publisherArr = searchMain
      .filter(item => item.STYPE === '2')
      .map(items => items);
    //地区
    let areaArr = searchMain
      .filter(item => item.STYPE === '3')
      .map(items => items);
    //行业
    let industryArr = searchMain
      .filter(item => item.STYPE === '4')
      .map(items => items);
    let options: any = [
      {
        label: renderTitle('债券'),
        options: bondArr.map((item: any) => {
          return renderItem(item);
        }),
      },
      {
        label: renderTitle('发行人'),
        options: publisherArr.map((item: any) => {
          return renderItem(item);
        }),
      },
      {
        label: renderTitle('地区'),
        options: areaArr.map((item: any) => {
          return renderItem(item);
        }),
      },
      {
        label: renderTitle('行业'),
        options: industryArr.map((item: any) => {
          return renderItem(item);
        }),
      },
    ];
    setOptions(options);
  }, [searchMain]);
const renderItem = (item: any) => {
    return {
      value: item.DISPLAYNAME,
      key: item.DISPLAYNAME,
      stype:item.STYPE,
      label: (
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
          }}
        >
          {item.DISPLAYNAME}
          <span></span>
        </div>
      ),
    };
  };

const [inputText, setInputText] = useState(’’); //输入框内容
const changeValue = e => {
setInputText(e);
};
//点击option开始导入
const onSelects = (value: any, option: any) => {}
//点击查询按钮
const inputSearch = (param: any) => {}
//点击搜索
const handleSearch = (value: string) => {}

就这吧，应该能看懂