select2可远程下拉框

  1. 引入

    1
    2
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>

  2. 初始化（两种）

    1. 已有select option标签

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      var _html = '<option value="">--请选择--</option>';
      var _persons = ((_dataResult || [])[0] || {}).contacts || [];
      var _value = '';
      for (var i = 0; i < _persons.length; i++) {
          _value = _persons[i].name + '-' + _persons[i].role;
          var _id = _persons[i].erpId
          _html += '<option value="' + _id + '">' + _value + '</option>';
      }
      $('#box').html(_html); // 往select插入option
      $('#box').select2(); // 初始化

    2. 通过数据

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
         var _$customSelect2 = $('#box').select2({
             placeholder: '请输入xxxx',
             width: '170px', // 文本宽度
             delay: 1000, // 文本框停止输入1000毫秒 开始发送请求
             ajax: {
                 'url': 'i8_session.ajaxWfHost +  'site/ajax_main/getcontactlist'',
                 'async': true,
                 dataType: 'json',
                 data: function (params) {
             		// params.term 是输入框内容
                     _data.contractNum = params.term;
                     return _data;
                 },
                 type: 'get',
                 processResults: function (data) {
                     var _list = data.ReturnObject || [];
                     var _arr = [];
                     var _listArr = [];
                     for (var i = 0; i < _list.length; i++) {
                         _listArr.push(_list[i]);
                         _arr.push({'id':_list[i].ID,'text':_list[i].Name});
                     }
             		// _arr 是用来初始化的数据 格式需要为以下
             		// [{'id':xxx,'text':xxx}]
             
             
                     // if($.isFunction(_callback)){
                     //     _callback(_listArr,{});
                     // }
                     var _ret = {};
                     _ret.results = _arr;
                     return _ret;
                 },
                 cache: true,
                 success: function (data) {
      fn();
                 }
             }
         })

  3. 事件 （暂时只用了选择事件 其他参照文档）

    • 选择事件

      1
      2
      3
      4
      5
      // _$customSelect2是这个select2实例
      _$customSelect2.on('select2:select', function () {
              currentContractNo = $("#box").select2("data")[0].text; // 当前选中的内容
              fnGetContactList();
      })

  4. 取值 赋值等数据操作

    1
    2
    $("#box").val('xxxx').select2(); // 选中id为 xxxx的option（编辑回显）
    $("#box").select2("data"); // 取当前选中的数据（是个数组）

  5. 用的时候踩过的坑（使用实例在证书系统的证书申请页面 apply.js）

    • 点击下拉框准备搜索的时候会闪烁一下 可能是多次调用
    • 输入内容不触发搜索 可能是重复初始化了