//用到此方法的情景  先根据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>

antd模糊搜索和远程数据的结合的更多相关文章

  1. Oracle Database Server 'TNS Listener'远程数据投毒漏洞(CVE-2012-1675)解决

    环境:Windows 2008 R2 + Oracle 10.2.0.3 应用最新bundle patch后,扫描依然报出漏洞 Oracle Database Server 'TNS Listener ...

  2. jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据

    jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...

  3. HTML5 Web app开发工具Kendo UI Web中如何绑定网格到远程数据

    在前面的文章中对于Kendo UI中的Grid控件的一些基础的配置和使用做了一些介绍,本文来看看如何将Kendo UI 中的Grid网格控件绑定到远程数据. 众所周知Grid网格控件是用户界面的一个重 ...

  4. rsync+inotify实现远程数据备份

    一.rsync的基本介绍 1.  什么是rsync Rsync是一款开源的.快速的.多功能的.可以实现增量的本地货远程数据镜像同步备份的优秀工具,Rsync使用与unix,linux,windows等 ...

  5. EasyUI queryParams属性 在请求远程数据同时给action方法传参

    http://www.cnblogs.com/iack/p/3530500.html?utm_source=tuicool EasyUI queryParams属性 在请求远程数据同时给action方 ...

  6. PHP file_get_contents函数读取远程数据超时的解决方法

    PHP file_get_contents函数读取远程数据超时的解决方法 投稿:junjie 字体:[增加 减小] 类型:转载   这篇文章主要介绍了PHP file_get_contents函数读取 ...

  7. PhoneGap+jQuery Mobile+Rest 访问远程数据

    最近研究Mobile Web技术.发现了一个好东西-PhoneGap! 发现用PhoneGap+jQuery Mobile是一个很完美的组合! 本实例通俗易懂.适合广大开发人群:高富帅.白富美.矮穷戳 ...

  8. Linux中Curl命令couldn't connect to host解决方案 php操作Curl(http,https)无法获取远程数据解决方案

    本人在做百度账户第三方登录接口,获取百度token,利用php操作curl post方式发送请求token,出现couldn't connect to host错误.经过调试测试,最后终于成功.回头写 ...

  9. [置顶] Xamarin android 调用Web Api(ListView使用远程数据)

    xamarin android如何调用sqlserver 数据库呢(或者其他的),很多新手都会有这个疑问.xamarin android调用远程数据主要有两种方式: 在Android中保存数据或调用数 ...

随机推荐

  1. 【MySQL】(四)表

    本篇文章将从InnoDB存储引擎表的逻辑存储及实现开始进行介绍,然后将重点分析表的物理存储特征,即数据在表中是如何组织存放的.简单来说,表就是关于特定实体的数据集合,这也是关系型数据库模型的核心. 1 ...

  2. linux初学者-firewall篇

     linux初学者-firewall篇 firewalld是防火墙的另一种程序,与iptables相同,但是使用起来要比iptables简单的点,不需要了解3张表和5条链也可以使用. 1.firewa ...

  3. python带有GIL解释器锁

    1.GIL是什么?GIL的全称是Global Interpreter Lock(全局解释器锁),来源是python设计之初的考虑,为了数据安全所做的决定. 2.每个CPU在同一时间只能执行一个线程(在 ...

  4. C#中谁最快:结构还是类?

    前言 在内存当道的日子里,无论什么时候都要考虑这些代码是否会影响程序性能呢? 在现在的世界里,几乎不会去考虑用了几百毫秒,可是在特别的场景了,往往这几百毫米确影响了整个项目的快慢. 通过了解这两者之间 ...

  5. js获取手机系统语言

    只需 navigator.language 就可以获取手机系统语言,要做国际化的童鞋可以看看 如图:(第一次是简体,第二次切换English),zh-CN,en-US是语言代码 更多语言代码,请查看h ...

  6. MySQL 之 Explain 输出分析

    ​MySQL 之 Explain 输出分析 背景 前面的文章写过 MySQL 的事务和锁,这篇文章我们来聊聊 MySQL 的 Explain,估计大家在工作或者面试中多多少少都会接触过这个.可能工作中 ...

  7. react解析: render的FiberRoot(三)

    react解析: render的FiberRoot(三) 感谢 yck: 剖析 React 源码解析,本篇文章是在读完他的文章的基础上,将他的文章进行拆解和加工,加入我自己的一下理解和例子,便于大家理 ...

  8. java学习中碰到的疑惑和解答(二)

    路径问题是一个在平时学习和开发碰到的常见问题,对于初学者是一个比较值得研究的东西.因此对路径问题进行总结. 1. 编写路径为了告诉编译器如何找到其他资源.   2. 路径分类: 相对路径:从当前资源出 ...

  9. 自定义markdown代码高亮显示-cnblog

    这个代码高亮..一点儿都不高亮...... cnblog里已经有闻道先者贴出代码了, https://www.cnblogs.com/liutongqing/p/7745413.html 效果大概是这 ...

  10. Excel批量导入(导出同理)

    在做JavaWeb中添加数据使我们在所难免会遇到的,在大数据的环境下批量添加和批量删除是必须的,而批量删除只需要获取到我们需要删除的ID就可以了,在批量添加中我们就会遇到问题,问题是得到批量的数据,这 ...