1. $('#countryID').select2(
  2. {
  3. placeholder: "请选择国家",
  4. ajax: {
  5. dataType: 'json',
  6. type: 'POST',
  7. delay: 500,
  8. data: function (params) {
  9. return {
  10. SearchKey: params.term //params.term 搜索参数值
  11. };
  12. },
  13. transport: async function (params, success, failure) { //这个params和上个params是不太一样,建议 console.log(params)
  14. if (typeof (params.data.SearchKey) == "undefined") { //刚聚焦是参数值是undefined的
  15. var data = await vm.searchCountries({}); //data是返回的绑定数据,json数组 [{"ComapnyDistrictCode":[],"ParentID":"0","Name":"阿富汗伊斯兰国"},{...}]
  16. if (data && data.length > 0) {
  17. success(data);                     //插件自带的回调success函数,
  18. } else {
  19. failure();
  20. }
  21. }
  22. else if (params.data.SearchKey.length >= 2) { //如果输入的参数值大于等于2,去搜索数据
  23. var data = await vm.searchCountries(params.data);
  24. if (data && data.length > 0) {
  25. success(data);
  26. } else {
  27. failure();
  28. }
  29. }
  30. },
  31. processResults: function (data, page) {
  32. var arr = [];
  33. data.map(x => arr.push({ id: x.ID, text: x.NameEn + '(' + x.Name + ')' })); //整理绑定格式 , 放到arr里
  34. return {
  35. results: arr,
  36. more: false
  37. };
  38. },
  39. cache: true
  40. },
  41. escapeMarkup: function (markup) {
  42. return markup;
  43. },
  44. // let our custom formatter work
  45. // minimumInputLength: 2, //至少输入多少个字符后才会去调用ajax
  46. // maximumInputLength: 20, //最多能输入多少个字符后才会去调用ajax
  47. // minimumResultsForSearch: 1,
  48. // width: "260px",
  49. templateResult: function (data) {
  50. if (data.loading) return data.text;
  51. return "<div>" + data.text + "</div>";
  52. },
  53. templateSelection: function (data) {
  54. return data.text;
  55. }
  56. }).on('change', function () { //onchange函数回调
  57. // 這裡呼叫回調並傳入現在選取的 value
  58. vm.customFrom.Country = this.value;
  59. vm.customFrom.CountryIndex = this.selectedIndex;
  60. this.isInitSelect = true;
  61. });
  62. }
  63. },
  64. searchCountries(params) {        //异步请求数据
  65. return new Promise(function (resolve, reject) {
  66. $fn.post($api.getCountries, params, ret => {
  67. if (ret.ErrorCode == 1 && ret.Data) {
  68. resolve(ret.Data);
  69. } else {
  70. resolve([]);
  71. }
  72. });
  73. });

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. Clion pycharm激活码(可使用到2019年2月)

    D87IQPUU3Q-eyJsaWNlbnNlSWQiOiJEODdJUVBVVTNRIiwibGljZW5zZWVOYW1lIjoiTnNzIEltIiwiYXNzaWduZWVOYW1lIjoiI ...

  2. 读书笔记之Linux系统编程与深入理解Linux内核

    前言 本人再看深入理解Linux内核的时候发现比较难懂,看了Linux系统编程一说后,觉得Linux系统编程还是简单易懂些,并且两本书都是讲Linux比较底层的东西,只不过侧重点不同,本文就以Linu ...

  3. Go Code Review Comments 译文(截止2018年7月27日)

    持续更新中- 原文最新链接 https://github.com/golang/go/wiki/CodeReviewComments/5a40ba36d388ff1b8b2dd4c1c3fe820b8 ...

  4. word文档的python解析

    主要两块,第一个是文件类型的转换,第二个是用docx包去对word文档中的table进行parse 1. 文件格式装换 因为很多各种各样的原因,至今还有一些word文档是doc的格式存的,对于这种,如 ...

  5. Javascript高级编程学习笔记(4)—— JS中的数据类型(2)

    接着昨天的文章,今天这篇文章主要讲述JS中剩余的两种数据类型String,和Object String类型 对于该类型,书中给出的解释为:由0或多个16为Unicode字符组成的字符序列. 对于JS中 ...

  6. Java 字符串类型常用方法

    常用方法 获取字符串长度 public int length() 字符串Unicode操作 这部分用的不多,不是很清楚,先记载在这. //获取指定索引处的元素对应的unciode编码 public i ...

  7. AndroidStudio制作“我”的界面,设置,修改密码,设置密保和找回密码

    前言 大家好,给大家带来AndroidStudio制作"我"的界面,设置,修改密码,设置密保和找回密码的概述,希望你们喜欢 学习目标 掌握修改密码功能的开发,和实现用户密码的修改: ...

  8. css 如何“画”一个抽奖转盘

    主要描述的是如何运用 css 绘制一个抽奖转盘,并运用原生 js 实现转盘抽奖效果. 先来张效果图: 布局 一般来说,转盘一般有四个部分组成:外层闪烁的灯.内层旋转的圆盘.圆盘上的中奖结果.指针. 所 ...

  9. 【微服务】.netCore eShopOnContainers 部署实践《一》

    官方说明文档 -------------------------------------------------------------- # eShopOnContainers - Microser ...

  10. python中使用for循环,while循环,一条命令打印99乘法表

    用for循环打印九九乘法表: 1 2 3 4 5 6 for i in range (1,10):     for j in range(1,10):         print(j,"x& ...