自动补全的 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>
)
