antd模糊搜索和远程数据的结合

//用到此方法的情景  先根据input框中的姓名模糊搜索出客户名称，当选中客户名称之后，获取ID ，根据客户的ID，去搜索数据列表。

防抖方法

let timeout;

let currentValue

function fetch(value, callback) {

if (timeout) {

clearTimeout(timeout);

timeout = null;

}

currentValue = value;

//进行数据请求

function fake() {

const param={};

param.url = apiUrl.selectKgoMerchantList;

param.data={

merchantName:value

}

param.callback=(data)=>{

console.log(data)

//回调方法

callback(data.data)

}

getJsonp(param)

}

timeout = setTimeout(fake, 600);

}

 

//方法

handleChange = (value) => {

console.log(value)

this.setState({ value });

}

//当input框中的值变化是，调用此方法 进行数据请求，

handleSearch = (value) => {

//list是存放请求的数据

fetch(value, data => this.setState({ list:data }));

}

select=(e,option)=>{

//e是当前的option中的value  option可以打印看一下，里边有许多数据  ，我需要的是children

const param ={};

param.data={

ownerPartyId:e,

ownerRealName:option.props.children

}

console.log(param.data)

param.url = apiUrl.selectLongBillListByMerchant;

param.callback=(data)=>{

console.log(data)

if (data.result !== 'success') {

alertMsg(data.msg || '服务器异常');// 异常提示

this.setState({ loading: false });// 关闭请求状态

} else {

// 分页处理

const pagination = this.state.pagination;

pagination.total = data.count / 1;

this.setState({ loading: false, data: data.data || [], pagination,merchantName:''});

console.log(this.state)

}

}

console.log(param)

getJsonp(param)

}

 

 

 

//list是输入名字之后请求到的数据，遍历数据。形成select列表。

const options = this.state.list.map((d,index) => <Option key={index} value={d.partyId}>{d.merchantName}</Option>);

return (

<div>

<Form.Item label="关联客户：" colon={false} >

{getFieldDecorator('partyId', {

})(

//选择列表 里边的方法可以自己在antd中查看

<Select

style={{width:200}}

showSearch

value={this.state.value}

// placeholder={this.props.placeholder}

// style={this.props.style}

defaultActiveFirstOption={false}

showArrow={false}

filterOption={false}

onSearch={this.handleSearch} // 文本框值变化时回调

onChange={this.handleChange} //value 值变化是调用

notFoundContent={null}

onSelect = {this.select.bind(this)}//选中时进行数据请求

allowClear = {true}

>

{options}

</Select>

)}

</Form.Item>