Select2异步搜索数据
$('#countryID').select2(
{
placeholder: "请选择国家",
ajax: {
dataType: 'json',
type: 'POST',
delay: 500,
data: function (params) {
return {
SearchKey: params.term //params.term 搜索参数值
};
},
transport: async function (params, success, failure) { //这个params和上个params是不太一样,建议 console.log(params)
if (typeof (params.data.SearchKey) == "undefined") { //刚聚焦是参数值是undefined的
var data = await vm.searchCountries({}); //data是返回的绑定数据,json数组 [{"ComapnyDistrictCode":[],"ParentID":"0","Name":"阿富汗伊斯兰国"},{...}]
if (data && data.length > 0) {
success(data); //插件自带的回调success函数,
} else {
failure();
}
}
else if (params.data.SearchKey.length >= 2) { //如果输入的参数值大于等于2,去搜索数据
var data = await vm.searchCountries(params.data);
if (data && data.length > 0) {
success(data);
} else {
failure();
}
}
},
processResults: function (data, page) {
var arr = [];
data.map(x => arr.push({ id: x.ID, text: x.NameEn + '(' + x.Name + ')' })); //整理绑定格式 , 放到arr里
return {
results: arr,
more: false
};
},
cache: true
},
escapeMarkup: function (markup) {
return markup;
},
// let our custom formatter work
// minimumInputLength: 2, //至少输入多少个字符后才会去调用ajax
// maximumInputLength: 20, //最多能输入多少个字符后才会去调用ajax
// minimumResultsForSearch: 1,
// width: "260px",
templateResult: function (data) {
if (data.loading) return data.text;
return "<div>" + data.text + "</div>";
},
templateSelection: function (data) {
return data.text;
}
}).on('change', function () { //onchange函数回调
// 這裡呼叫回調並傳入現在選取的 value
vm.customFrom.Country = this.value;
vm.customFrom.CountryIndex = this.selectedIndex;
this.isInitSelect = true;
});
}
},
searchCountries(params) { //异步请求数据
return new Promise(function (resolve, reject) {
$fn.post($api.getCountries, params, ret => {
if (ret.ErrorCode == 1 && ret.Data) {
resolve(ret.Data);
} else {
resolve([]);
}
});
});
Select2异步搜索数据的更多相关文章
- jquery zTree异步搜索的例子--搜全部节点
参考博客: https://segmentfault.com/a/1190000004657854 https://blog.csdn.net/houpengfei111/article/detail ...
- 09.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据,返回字符串
cmd下安装axios npm install axios 安装好后,会多出node_modules文件夹 思路: 监听data里的word改变时,发送ajax异步请求数据, 把返回的数据赋值给dat ...
- ajax异步获取数据后动态向表格中添加数据(行)
因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...
- python爬虫(3)——用户和IP代理池、抓包分析、异步请求数据、腾讯视频评论爬虫
用户代理池 用户代理池就是将不同的用户代理组建成为一个池子,随后随机调用. 作用:每次访问代表使用的浏览器不一样 import urllib.request import re import rand ...
- datatables异步获取数据、简单实用
IKC项目总结 一.认证难题管理模块 1. 如何使用datatables进行获取数据内容 datatables简介:Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何H ...
- ASP模拟POST请求异步提交数据的方法
这篇文章主要介绍了ASP模拟POST请求异步提交数据的方法,本文使用MSXML2.SERVERXMLHTTP.3.0实现POST请求,需要的朋友可以参考下 有时需要获取远程网站的某些信息,而服务器又限 ...
- flask+sqlite3+echarts3+ajax 异步更新数据
结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...
- 串行通讯之.NET SerialPort异步写数据
目录 第1章说明 2 1 为什么需要异步写数据? 2 2 异步写数据的代码 2 3 源代码 4 第1章说明 1 为什么需要异步写数据? 如下图所示,以波特率300打开一个串口. ...
- 使用load()方法异步请求数据
使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为: load(url,[data],[callback]) 参数url为加载服务器地址,可选项d ...
随机推荐
- openstack之cinder_backup对接ceph存储
M版openstack,是kolla部署的 1.介绍 backup 功能好像与 snapshot 很相似,都可以保存 volume 的当前状态,以备以后恢复.但二者在用途和实现上还是有区别的,具体表现 ...
- python中,类方法和静态方法区别。
面相对象程序设计中,类方法和静态方法是经常用到的两个术语. 逻辑上讲:类方法是只能由类名调用:静态方法可以由类名或对象名进行调用. 在C++中,静态方法与类方法逻辑上是等价的,只有一个概念,不会混淆. ...
- mysql data type <----> java data type (数值)
https://dev.mysql.com/doc/refman/5.7/en/storage-requirements.html +----------------------------+---- ...
- 理解React组件的生命周期
本文作者写作的时间较早,所以里面会出现很多的旧版ES5的时代的方法.不过,虽然如此并不影响读者理解组件的生命周期.反而是作者分为几种不同的触发机制来解释生命周期的各个方法,让读者更加容易理解涉及到的概 ...
- Codeforces Round #536 (Div. 2)--1106D - Lunar New Year and a Wander
https://codeforces.com/contest/1106/problem/D 题意:求出字典序最小的走法 解法:走到每个点,都选取与这个点连通的序号最小的点,并且这个序号最小的点没有被访 ...
- 精选!15个必备的VSCode插件
Visual Studio Code 是由微软开发的一款免费.跨平台的文本编辑器.由于其卓越的性能和丰富的功能,它很快就受到了大家的喜爱. 就像大多数 IDE 一样,VSCode 也有一个扩展和主题市 ...
- 论如何优雅地拿下PHPCMS
作者:J0o1ey 原文来自:论如何优雅地拿下PHPCMS 一.PHPCM PHP是国内领先的网站内容管理系统,同时也是一个开源的PHP开发框架,采用PHP5+MYSQL进行开发,拥有非常 ...
- mysql数据表修复
当数据库表被破坏,运行报错: Table './database/tablename' is marked as crashed and last (automatic?) repair failed ...
- [译]ElasticSearch vs. Solr
在Gen2产品的早期阶段, 我们事实上是失败的, 这促使我们重新审视我们现有的技术栈. 我们仔细分析系统中的每个独立的组件,并记录下来, 当然其中也包括构成我们核心功能的搜索引擎技术. 在我们的通用日 ...
- git无法识别新增的文件
问题是这样的我新增几个文件夹打算提交到git库,但输入指令:“git status” 发现新增的文件夹并没有出现在准备提交区里 不知道什么原因造成的后来我百度找到方法 使用指令:“git add -f ...