使用 templateSelection 设置额外数据

//list of real logo names from siple-icons
const logos = [ "spotify", "pandora", "deezer", "apple", "tidal", "youtube", "amazon", "soundcloud" ];

//list of real songs titles
const songTitles = [ "Imagine", "One", "Billie Jean", "Bohemian Rhapsody", "Hey Jude", "Like a Rolling Stone", "I Can't Stop Loving You", "Sweet Child o' Mine", "Under Pressure", "Hotel California", "Thriller", "Stairway to Heaven", "Shake it Off", "Halo", "Happy", "Despacito", "Shape of You", "Roar", "Jump", "Smooth Criminal" ];

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

//create a list of 50 {id,text,logo,artistId} made up from thin air
let songsArray = Array.from({length: 50}).map(() => ({
  id: getRandom(100000, 999999),
  text: songTitles[getRandom(0, songTitles.length - 1)],
  logo: `https://cdnjs.cloudflare.com/ajax/libs/simple-icons/3.2.0/${logos[getRandom(0, logos.length - 1)]}.svg`,
  artistId: getRandom(1, 10)
}));

//filter the songsArray returning the subset matching artistId exact number and term as a word contained in .text
function filterSongs(songsArray, term, artistId) {
    return songsArray.filter(song =>
        song.text.toLowerCase().includes(term.toLowerCase()) &&
        (artistId == '' || song.artistId === artistId)
    );
}

//redefine the $.ajax function...
(function ($) {
    var originalAjax = $.ajax;
    $.ajax = function (params) {
        //listening to the url http://bogusendpoint/
        if (params.url.indexOf('http://bogusendpoint/') === 0) {

            //support for GET params populating the keyValues properties bag
            var queryString = params.url.split('?')[1];
            var keyValues = {};
            if (queryString) {
                queryString.split('&').forEach(function (pair) {
                    var keyValue = pair.split('=');
                    keyValues[keyValue[0]] = decodeURIComponent(keyValue[1]);
                });
            }

            //query will contain both params.data and the querystring keyValues
            const query = {...keyValues, ...params.data};

            let results = [];

            //if the f param is searchSmSongs
            if('f' in query && query.f === 'searchSmSongs'){
                //grab the query terms from the request
                let searchParam_q = '';
                let searchParam_artistId = '';
                if ('q' in query) searchParam_q = query.q;
                if ('aid' in query) searchParam_artistId = query.aid;
                //filter the songs full set
                const filteredSongs =
                  filterSongs(songsArray, searchParam_q, searchParam_artistId);
                //and prepare a response object with the filtered set
                results = filteredSongs;
            }

            //resolve and return the "promise"
            var deferred = $.Deferred();
            deferred.resolve(results);
            if (params.success) params.success(results);
            return deferred.promise();
        }

        //if the endpoint differs, call and return the original ajax function
        return originalAjax.apply($, arguments);
    }

})(jQuery);

//init the select2
const apiurl = 'http://bogusendpoint/'
const artistId = '';
$("#sm_report_focussongs").select2({
    minimumInputLength: 2,
    width: 'resolve',
    templateResult: searchfocussongs_template,
    templateSelection: searchfocussongs_template,
    ajax: {
        url: `${apiurl}`,
        dataType: "json",
        type: "GET",
        data: function(params) {
            return { f: 'searchSmSongs', aid: artistId, q: params.term };
        },
        processResults: function(data) {
            return {
              results: data.map(item => (
                { text: item.text, id: item.id, logo: item.logo }
              ))
            }
        }
    }
});

const baseurl = 'https://cdnjs.cloudflare.com/ajax/libs/simple-icons/3.2.0/';
var staticSongs = [
    { text: 'I Like It', id: 427818, logo: `${baseurl}/pandora.svg` },
    {
      text: '71. I Like It (feat. Kontra K and AK Ausserkontrolle)',
      id: 146387,
      logo: `${baseurl}/deezer.svg`
    }
];
addAndSelectSongs(staticSongs);

function addAndSelectSongs(songs){
    songs.forEach((song) => {
        var option = new Option(song.text, song.id, true, true);
        $(option).data('logo', song.logo);
        $("#sm_report_focussongs").append(option).trigger('change');
        $("#sm_report_focussongs")
          .trigger({ type: 'select2:select', params: {data: song} });
    });
}

function searchfocussongs_template(state){
    if (!state.id) {
        return state.text;
    }

    let logoSrc = state.logo;
    if(!state.logo)
        logoSrc = $(state.element).data('logo');
    
    return $(`<span><img src="${logoSrc}" style="height:20px;width:20px;" />${state.text}</span>`);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet" />

<select
    id="sm_report_focussongs"
    class="form-control"
    multiple="multiple"
    style="width:100%"></select>

var d = [
    {
        "text": "I Like It",
        "id": "427818",
        "logo": "https:\/\/cdnjs.cloudflare.com\/ajax\/libs/simple-icons\/3.2.0\/pandora.svg"
    },
    {
        "text": "71. I Like It (feat. Kontra K and AK Ausserkontrolle)",
        "id": "146387",
        "logo": "https:\/\/cdnjs.cloudflare.com\/ajax/libs\/simple-icons\/3.2.0\/deezer.svg"
    }
];

searchfocussongs(d);

function searchfocussongs(data) {
    if (data.length > 0) {
        $(data).each(function() {
            //you are creating an option element saying defaultSelected=true and selected=true for all of them!
            var option = new Option(this.text, this.id, true, true);
            //setting the data-logo attribute for the new option element
            $(option).data('logo', this.logo);
            $("#sm_report_focussongs").append(option).trigger('change');
        });
    }

    $("#sm_report_focussongs").select2({
        minimumInputLength: 2,
        width: 'resolve',
        templateResult: searchfocussongs_template,
        templateSelection: searchfocussongs_template,
    });
}

function searchfocussongs_template(ar) {
  //and I'm fetching the logo data retrieving the information from ar.element through its data attribute value
  var item =
    $(
      '<span><img src="' + $(ar.element).data('logo') +
      '"  style="height:20px;width:20px;" /> ' + ar.text + '</span>'
    );
  return item;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet" />
<select class="form-control" multiple="multiple" id="sm_report_focussongs" style="width:100%">