React input box fuzzy search
async fetch(value, callback) {
const that = this
let timeout
let currentValue
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
currentValue = value;
async function fake() {
const res = await that.request.findAllAdministrativeOrg({
name: value })
console.log(res, "+++++++++++++")
const data = [];
res.data.forEach(r => {
data.push({
id: r.id,
name: r.name,
});
});
callback(data);
console.log(data, "+=============+")
}
timeout = setTimeout(fake, 300);
}
handleSearch = (val) => {
console.log(val, "33333333")
this.fetch(val, data => this.setState({
findAllAdministratList: data }));
console.log(this.state.findAllAdministratList, '4444444444')
};
handleChange = (val, b) => {
console.log(val, b);
this.setState({
performUnitCode: val, performUnitName: b.children, })
this.fetch(val, data => this.setState({
findAllAdministratList: data }));
};
HTML
render() {
const {
findAllAdministratList } = this.state
const {
Option } = Select;
-------
return <div>---------
<Col span={
12}>
<Form.Item name="performUnitCode" label="执行单位" rules={
[{
required: true,
message: '请选择执行单位',
}]}>
<Select
showSearch
placeholder="请选择"
style={
{
width: "100%", height: 32 }}
defaultActiveFirstOption={
false}
showArrow={
false}
filterOption={
false}
onSearch={
this.handleSearch}
onChange={
this.handleChange}
notFoundContent={
null}
>
{
findAllAdministratList.map(item => {
return <Select.Option value={
item.id}>{
item.name}</Select.Option>
})}
</Select>
</Form.Item>
</Col>
When the form is modified and echoed, it needs to be dropped again
//详情接口
async selectPatrolTaskDto(params?) {
const res = await this.request.selectPatrolTaskDto({
...params, id: this.state.id })
console.log(res)
this.fillInput(res.data)
this.setState({
version: res.data.version
}, () => {
this.findAllAdministrativeOrgss(res.data.performUnitName)
})
}
//下拉列表数据详情
async findAllAdministrativeOrgss(name) {
const res = await this.request.findAllAdministrativeOrg({
name: name })
console.log(res)
const data = [];
res.data.forEach(item => {
data.push({
id: item.id,
name: item.name
});
});
console.log(data, '111111111222')
this.setState({
findAllAdministratList: data
}, () => {
});
console.log(this.state.findAllAdministratList, ')))))))))))))))))')
}