'Format Select2 dropdown results having json

I am using select2 dropdown control to display list of facilities e.g facility A,B,C...etc. along with its location details. I am looking for following output,

enter image description here

Currently I can display "facility name", but would like to display City and State from my json objects. How can I format my results to display them as above html format? Here's my code so far.

<input type="hidden" id="ddlFacility" style="width:100%" />

$("#ddlFacility").select2({
        placeholder: "Select a Facility",
        ajax: {
            url: "my url",
            dataType: 'json',
            type: "GET",
            quietMillis: 50,
            data: function ( term ) { return { term: term }; },
            results: function (data) {
                return {
                    results: $.map(data, function (item) {
                        return { text: item.FacilityName, id: item.FacilityId }
                    })
                };
            }
        }
    });


Solution 1:[1]

Please note that nowadays if using select2 version 4 or above the formatSelection and formatResult were replaced by templateSelection and templateResult More details on the official documentation: https://select2.org/upgrading/migrating-from-35

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 wazza