自动补全的 select antd react

文档：自动补全的 select antd react.note

链接：http://note.youdao.com/noteshare?id=f5e4a93d2b9d6be8e459edd4eb86323b\&sub=19796E9BC04D4ABD9ACE325FDFF59B0E
添加链接描述

js 复制代码

import React, { useState, useRef } from 'react';
import { AutoComplete, Button, Input } from 'antd';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import TimeUtil from '@/utils/TimeUtil';

interface AutoCompleteSearchBoxProps {
  // history: any; // 这里的类型可以根据你的实际需求进行调整
  // data: any; // 这里的类型可以根据你的实际需求进行调整
  value: any;
  onChange: any;
  // onSelectChange 
}

interface SearchResult {
  label: string;
}
// { value=null, onChange=(val:any)=>{} }
// D:\proj\brain\admin-antd-react\src\components\AutoCompleteSearchInput
// JumpSearchBox
// JumpSearchBox
const AutoCompleteSearchInput: React.FC<AutoCompleteSearchBoxProps> = (props) => {
  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
  const inputRef = useRef<Input>(null);
  const navigate = useNavigate();
  const [searchVal, setSearchVal] = useState<string | null>(null);

  const handleButtonClick = () => {
    console.log("handleButtonClick")
    // console.log("autoCompleteRef.current")
    console.log("inputRef.current")
    console.log(inputRef.current)
    console.log("searchVal")
    console.log(searchVal)

    // console.log(autoCompleteRef.current)
    // if (autoCompleteRef.current) {
    //   const searchData = autoCompleteRef.current.getData(); // 获取AutoCompleteSearchInput组件的数据
    //   console.log(searchData);
    // }
  };
  // "前一周",
  const options = ["前三天",  "前一个月", "前一年"];

  function getSearchLabels(options) {
    let list = []
    for (let option of options) {
      list.push(
        {
          keywords: option,
          label: option
        },
      )

    }

    // console.log("list")
    // console.log(list)

    return list
  }


  // ts 获取 前一周的 时间戳

  // <TimeUtil className="wee"> </TimeUtil>


  let SearchLabels = [
    {
      keywords: "dadad",
      label: "dadad"
    },
    {
      label: "ada"
    },
    {
      label: "前一年",
      // timestamp: TimeUtil.yesterdayMillis(-3)
    },
    
    {
      keywords: "week,前一周,周,zhou,1",
      label: "前一周",
      timestamp: TimeUtil.weekAddTimeStamp(-1)
    },

    ...getSearchLabels(options)
  ];

  // TimeUtil.weekAddTimeStamp(-3)

  function strIsLike(str: string, str2: string) {
    return str.includes(str2) || str2.includes(str)
  }

  function findLikeStrs(str, SearchLabels) {
    let resList = []
    for (let obj of SearchLabels) {
      // obj.label
      if (
        // strIsLike(str, obj.label)
        strIsLike(str, obj.keywords||obj.label)
      ) {
        resList.push(obj)
      }

    }

    return resList
  }

  const handleSearch = (value: string) => {
    if (!value) {
      setSearchResults(SearchLabels);
      return
    }
    props?.onChange(value)

    // 发送远程搜索请求
    axios
      .get(`https://api.example.com/search?q=${value}`)
      .then((response) => {
        const searchResults = response.data.results;
        setSearchResults(searchResults);
      })
      .catch((error) => {
        console.error('Error fetching search results:', error);
        // const searchResults: SearchResult[] = SearchLabels
        // setSearchResults(searchResults);

        //  setSearchResults(SearchLabels);
        setSearchResults(
          findLikeStrs(value, SearchLabels)
        );

      });

    // if (value) {

    // } else {
    //   setSearchResults([]);
    // }
  };

  const handleSelect = (value: string) => {
    setSearchVal(value)
    props.onChange(value)

    console.log("inputRef.current");
    console.log(inputRef.current);
    inputRef.current?.focus();
    // console.log(    "inputRef.current?.input.setValue");
    // console.log(    inputRef.current?.input.setValue);

    // inputRef.current?.input.setValue(value);

    let inputItem = inputRef.current?.input
    inputItem.value = value
    const path = `/details/${value}`;
    // navigate(path);
    console.log("props");
    console.log(props);

    console.log("props.history");
    console.log(props.history);
  };

  return (
    <div>
      <AutoComplete
        style={{ width: 200 }}
        options={searchResults.map((result) => ({
          value: result.label,
          label: result.label,
        }))}
        onSearch={handleSearch}
        onSelect={handleSelect}
      >
        <Input
          ref={inputRef}
          placeholder="请输入关键字"
        />
      </AutoComplete>

      {/* <Button type="primary" onClick={handleButtonClick} >AutoCompleteSearchInputButton</Button> */}
    </div>
  );
};

export default AutoCompleteSearchInput;

js 复制代码

import AutoCompleteSearchInput from '@/components/AutoCompleteSearchInput';


  <div>
        AutoCompleteSearchInput
        <AutoCompleteSearchInput onChange={onSelectChange} ref={autoCompleteRef} history={undefined} ></AutoCompleteSearchInput>

  {/* 点击按钮 获取 AutoCompleteSearchInput的 数据  */}
        <Button type="primary" onClick={handleButtonClick} >AutoCompleteSearchInputButton</Button>
      </div>