formatSelection not working in select2.js

Question

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

@AshishNautiyal updated jsfiddle: http://jsfiddle.net/n5phohov/2/ — Harshit Agarwal, Sep 21 '15 at 11:26
Just put an id there http://jsfiddle.net/n5phohov/4/. Probably the same problem http://stackoverflow.com/questions/15933830/unable-to-select-a-result-from-the-select2-search-results — Sergiy Kozachenko, Sep 21 '15 at 12:21
as of now formatSelection name was changed to templateSelection v4+ — Sergey, Mar 16 '18 at 12:50

score 4 · Answer 1 · answered Sep 05 '18 at 13:34

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

formatSelection not working in select2.js

1 Answers1

Linked