formatSelection not working in select2.js

问题

I am using select2.js to populate the field with multiple values using ajax call.

Below is the code that I am using.

HTML

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

Script

<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>

results are populating in dropdown but I am not able to select the populated results, I am not able to find what I am doing wrong?

Also I need the id of selected results in some other(hidden) field.

Update: jsfiddle: http://jsfiddle.net/n5phohov/2

回答1:

If you are using the current select2 v4, the parameters formatResult and formatTemplate were replaced by templateResult and templateSelection. Also you can call functions to format the results. Look the example bellow, observe that I used base64 image contained in a data attribute, you can easily replace for an image link matching with the option.

$('#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;
}

来源：https://stackoverflow.com/questions/32689698/formatselection-not-working-in-select2-js