select2 demo

https://select2.github.io/examples.html

一大堆的坑：

1. 不同版本之间貌似不兼容，对应版本看对应的文档。

2. 4.0.3版本：

    1）。 自定义渲染的option无法选中。谷歌了下，似乎返回的对象必需有 id和text属性， 另外可以加一个属性，指向对象本身。即：

　　ajax的processResults回调中：

processResults: function (data, params) {
                  params.page = params.page || 1;

                  return {
                    results: $.map(data, function (item) {
                            return {
                                element: item,
                                text:item.description,
                                id: item.model}
                        })
                  };
                }

  2）。不要写错select2函数的参数（层级不要混乱），看demo很容易懵逼。

select2({
        minimumInputLength: 2,
        tags: [],
        ajax: {...},
        escapeMarkup: function (markup) { return markup; }, 
        templateResult: formatTemplate,
        templateSelection: formatResponseSelection 
})

   

templateResult , 输出结果（单个option的定制化，是一个函数，接受 "results"中的单个元素，输出html的dom元素。
templateSelection, 选中时，默认选中的"results"单个元素的哪个属性的，函数。

3) 默认的输入被作为选项处理了，还没能解决这个问题。TOFIX.
4) 返回空列表时，js不能正常提示结果为空，而是将输入作为一个选项！TOFIX
5) select控件最好不要定义class，特别是bs3的form-control，会使宽度变得极其不可控。
6) select2 过的select的初始化，先初始化，然后触发其change事件才能初始化：http://stackoverflow.com/questions/30316586/select2-4-0-0-initial-value-with-ajax
　　 $(xxx_select).val(xxx_value).trigger("change");
7) allowClear属性（值：true/false）必需配合place和holder属性使用(值：具体的输入提示)。
8) 如果想展开下拉框就有一些选项， 可能你百度谷歌了一大堆都没有解决方案（比如这个:https://github.com/select2/select2/issues/4158） 。 其实解决方案很简单， 个人hack方案是将minimumInputLength设置为0， 即：
　　

select2({
        minimumInputLength: 0,//<-----!!!!
        tags: [],
        ajax: {...},
        escapeMarkup: function (markup) { return markup; }, 
        templateResult: formatTemplate,
        templateSelection: formatResponseSelection 
})

转载于:https://www.cnblogs.com/Tommy-Yu/p/6094918.html