$('#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异步搜索数据的更多相关文章

  1. jquery zTree异步搜索的例子--搜全部节点

    参考博客: https://segmentfault.com/a/1190000004657854 https://blog.csdn.net/houpengfei111/article/detail ...

  2. 09.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据,返回字符串

    cmd下安装axios npm install axios 安装好后,会多出node_modules文件夹 思路: 监听data里的word改变时,发送ajax异步请求数据, 把返回的数据赋值给dat ...

  3. ajax异步获取数据后动态向表格中添加数据(行)

    因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...

  4. python爬虫(3)——用户和IP代理池、抓包分析、异步请求数据、腾讯视频评论爬虫

    用户代理池 用户代理池就是将不同的用户代理组建成为一个池子,随后随机调用. 作用:每次访问代表使用的浏览器不一样 import urllib.request import re import rand ...

  5. datatables异步获取数据、简单实用

    IKC项目总结 一.认证难题管理模块 1. 如何使用datatables进行获取数据内容 datatables简介:Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何H ...

  6. ASP模拟POST请求异步提交数据的方法

    这篇文章主要介绍了ASP模拟POST请求异步提交数据的方法,本文使用MSXML2.SERVERXMLHTTP.3.0实现POST请求,需要的朋友可以参考下 有时需要获取远程网站的某些信息,而服务器又限 ...

  7. flask+sqlite3+echarts3+ajax 异步更新数据

    结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...

  8. 串行通讯之.NET SerialPort异步写数据

    目录 第1章说明    2 1 为什么需要异步写数据?    2 2 异步写数据的代码    2 3 源代码    4 第1章说明 1 为什么需要异步写数据? 如下图所示,以波特率300打开一个串口. ...

  9. 使用load()方法异步请求数据

    使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为: load(url,[data],[callback]) 参数url为加载服务器地址,可选项d ...

随机推荐

  1. 学习Acegi应用到实际项目中(3)

    此节将要了解的是AnonymousProcessingFilter.RememberMeProcessingFilter和LogoutFilter三个过滤器 1.AnonymousProcessing ...

  2. Note | Markdown

    目录 一.代码段 1.简单代码 2.大段代码 二.块注释 Blockquote 三.标题设置 四.字体 1.斜体 2.粗体 3.下划线 方案1:行内 HTML 方案2:html的span标签.设置行内 ...

  3. spring boot2 集成Redis

    1. 引入依赖 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spr ...

  4. 理解React组件的生命周期

    本文作者写作的时间较早,所以里面会出现很多的旧版ES5的时代的方法.不过,虽然如此并不影响读者理解组件的生命周期.反而是作者分为几种不同的触发机制来解释生命周期的各个方法,让读者更加容易理解涉及到的概 ...

  5. Python获取当前类的所有成员属性

    # -*- coding: utf-8 -*- class Market(object): def __init__(self): self.title = 'apple' self.count = ...

  6. Beta阶段冲刺集合贴

    第零篇准备博客:https://www.cnblogs.com/coolgirls/p/9066239.html 第一篇冲刺博客:https://www.cnblogs.com/coolgirls/p ...

  7. Elastic-search在linux上的安装

    今天是我装第四次 ES ,之前装好用了一段时间,后面莫名其妙爆炸了,炸出一堆异常... 安装环境: JDK1.8   centos    ElasticSearch-6.2.4 jdk1.8以上,所以 ...

  8. 5月份值得一看的 Java 技术干货!

    5月又即将要离我们远去了,这个月有小长假51劳动节,有54青年节,有513母亲节,更有坑爹的520神马节?!! 废话不说,又到了总结上个月干货的时候了,这个月我们带来了各种Java技术干货,都是不得不 ...

  9. maven个人总结

    一.解压maven(apache-maven-3.6.0-bin.zip) ---apache-maven-3.6.0 ---bin(Binary书写) >存放二进制可执行的文件(命令),例如m ...

  10. 12-部署EFK插件

    配置和安装 EFK 官方文件目录:cluster/addons/fluentd-elasticsearch $ ls *.yaml es-controller.yaml es-service.yaml ...