自動補全的 select antd react
文檔：自動補全的 select antd react.note
鏈接：http://note.youdao.com/noteshare?id=f5e4a93d2b9d6be8e459edd4eb86323b&sub=19796E9BC04D4ABD9ACE325FDFF59B0E
添加鏈接描述

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.labelif (// 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?.inputinputItem.value = valueconst path = `/details/${value}`;// navigate(path);console.log("props");console.log(props);console.log("props.history");console.log(props.history);};return (<div><AutoCompletestyle={{ width: 200 }}options={searchResults.map((result) => ({value: result.label,label: result.label,}))}onSearch={handleSearch}onSelect={handleSelect}><Inputref={inputRef}placeholder="請輸入關鍵字"/></AutoComplete>{/* <Button type="primary" onClick={handleButtonClick} >AutoCompleteSearchInputButton</Button> */}</div>);
};export default AutoCompleteSearchInput;

import AutoCompleteSearchInput from '@/components/AutoCompleteSearchInput';<div>AutoCompleteSearchInput<AutoCompleteSearchInput onChange={onSelectChange} ref={autoCompleteRef} history={undefined} ></AutoCompleteSearchInput>{/* 點擊按鈕 獲取 AutoCompleteSearchInput的 數據  */}<Button type="primary" onClick={handleButtonClick} >AutoCompleteSearchInputButton</Button></div>