mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 15:49:10 +08:00
502dac12aa
* docs: fix code * feat: lint * feat: prettier * feat: test * feat: review * feat: format html * feat: format html
77 lines
1.8 KiB
TypeScript
77 lines
1.8 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Select } from 'antd';
|
|
import type { SelectProps } from 'antd';
|
|
import jsonp from 'fetch-jsonp';
|
|
import qs from 'qs';
|
|
|
|
let timeout: ReturnType<typeof setTimeout> | null;
|
|
let currentValue: string;
|
|
|
|
const fetch = (value: string, callback: Function) => {
|
|
if (timeout) {
|
|
clearTimeout(timeout);
|
|
timeout = null;
|
|
}
|
|
currentValue = value;
|
|
|
|
const fake = () => {
|
|
const str = qs.stringify({
|
|
code: 'utf-8',
|
|
q: value,
|
|
});
|
|
jsonp(`https://suggest.taobao.com/sug?${str}`)
|
|
.then((response: any) => response.json())
|
|
.then((d: any) => {
|
|
if (currentValue === value) {
|
|
const { result } = d;
|
|
const data = result.map((item: any) => ({
|
|
value: item[0],
|
|
text: item[0],
|
|
}));
|
|
callback(data);
|
|
}
|
|
});
|
|
};
|
|
if (value) {
|
|
timeout = setTimeout(fake, 300);
|
|
} else {
|
|
callback([]);
|
|
}
|
|
};
|
|
|
|
const SearchInput: React.FC<{ placeholder: string; style: React.CSSProperties }> = (props) => {
|
|
const [data, setData] = useState<SelectProps['options']>([]);
|
|
const [value, setValue] = useState<string>();
|
|
|
|
const handleSearch = (newValue: string) => {
|
|
fetch(newValue, setData);
|
|
};
|
|
|
|
const handleChange = (newValue: string) => {
|
|
setValue(newValue);
|
|
};
|
|
|
|
return (
|
|
<Select
|
|
showSearch
|
|
value={value}
|
|
placeholder={props.placeholder}
|
|
style={props.style}
|
|
defaultActiveFirstOption={false}
|
|
suffixIcon={null}
|
|
filterOption={false}
|
|
onSearch={handleSearch}
|
|
onChange={handleChange}
|
|
notFoundContent={null}
|
|
options={(data || []).map((d) => ({
|
|
value: d.value,
|
|
label: d.text,
|
|
}))}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const App: React.FC = () => <SearchInput placeholder="input search text" style={{ width: 200 }} />;
|
|
|
|
export default App;
|