zoukankan      html  css  js  c++  java
  • 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,
                //  "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([]);
                }
              });
            });
  • 相关阅读:
    ES6:Iterator遍历器
    前端:对BFC的理解
    前端:性能优化之防抖与节流
    ES6新增数据类型Symbol
    ajax和fetch、aixos的区别
    我对js数据类型的理解和深浅(copy)的应用场景
    egg的基本使用
    前端:css3的过渡与动画的基础知识
    Java基础篇之类
    JAVA基础篇之Scanner
  • 原文地址:https://www.cnblogs.com/bibi-feiniaoyuan/p/9365300.html
Copyright © 2011-2022 走看看