javascript - formatSelection 在 select2.js 中不起作用

Question

我正在使用 select2.js 通过 ajax 调用用多个值填充该字段。

下面是我正在使用的代码。

HTML

<input id="id_test_name" class="form-control">

脚本

<script type="text/javascript">
    $("#id_test_name").select2({
        placeholder: "Search for an Item",
        minimumInputLength: 2,
        ajax: {
            url: "/resourse/?format=json&name=xyz",
            dataType: 'json',
            quietMillis: 100,
            data: function (term, page) {
                return {
                    option: term
                };
            },
            results: function (data, page) {
                return {
                    results: $.map(data.results, function (item) {
                        return {
                            name: item.name,
                            abbreviation: item.abbreviation,
                            id: item.id
                        }
                    })
                };
            }
        },
        formatResult: function (data, term) {
            return data.name + '(' +  data.abbreviation +')';
        },
        formatSelection: function (data) {
            return data.name + '(' +  data.abbreviation +')';
        },
        dropdownCssClass: "bigdrop",
        escapeMarkup: function (m) {
            return m;
        }
    });
</script>

结果正在下拉列表中填充，但我无法选择填充的结果，我无法找到我做错了什么？

我还需要一些其他(隐藏)字段中所选结果的 ID。

更新: jsfiddle:http://jsfiddle.net/n5phohov/2

Answer 1

如果您使用当前的 select2 v4，则参数 formatResult 和 formatTemplate 已替换为 templateResult 和 templateSelection。您还可以调用函数来格式化结果。看下面的例子，观察我使用了包含在数据属性中的base64图像，您可以轻松替换为与该选项匹配的图像链接。

$('#combo').select2({
        language : "pt-BR",
        allowClear: true,
        placeholder: "Selecione",
        templateResult: formatSingleResult,        
        templateSelection: formatSelected       
    }).on('select2:select', function (e) {
    var data = e.params.data;
    let thumbnailValue='';
    $(data.element.attributes).each( function (){
        if ($(this)[0].name == 'data-thumbnail' ){        
            thumbnailValue = $(this)[0].value;
        }
    });

function formatSelected(state) {
    let img='';
    if (printImage == true){
          img='<img src="' + $(state.element).attr('data-thumbnail') +'" class="comboImg"/>';
  }
  $item = $(`<span>${img} ${state.text.trim()}<span>`); 
  return $item;
}

function formatSingleResult (result) {
    if (!result.id) {
        return result.text.trim();
    } 
    let img="";
        if (printImage == true){
        img='<img src="' + $(result.element).attr('data-thumbnail') +'" class="flag"/>';
    }    
    const optionText = result.text.trim();  
    const $item = $(`<span>${img} ${optionText}<span>`);
    return $item;
}