由Select2触发的插件

Question

newbie here first, my english is not good enough to describe the problem that i'm facing right now, so consider to see my code below

$('#selectOriginAirport, #selectDestinationAirport').select2({
            placeholder: 'Select Airport',
            ajax: {
                url: '{{url('get-airports')}}',
                dataType: 'json',
                delay: 250,
                data: function(params){
                    return { keyword: params.term };
                },
                processResults: function(datas, params) {
                    return {
                        results: $.map(datas.data, function(item) {
                            return {
                                text: item.cityName + ' - '+item.airportName + ' ('+item.airportCode+')',
                                id: item.airportCode+'|'+item.cityName,
                                lat: item.airportLatitude,
                                lon: item.airportLongitude
                            }
                        })
                    };
                },
                cache: true
            },
            escapeMarkup: function (markup) { 
                // console.log('markup >>> ' + markup);
                return markup; 
            },
            minimumInputLength: 3,
            templateResult: function(data) {
                // console.log('data >>> ' + data);
                if(data.loading) {
                    return data.text;
                }
                var markup = '<p>'+data.text+'</p>';
                return markup;
            },
            templateSelection: function(data) {
                console.log(data);
                if($(this).is('#selectOriginAirport')){
                    console.log('pepaya');
                    $("[name='flightOriginLat']").val(data.lat);
                    $("[name='flightOriginLon']").val(data.lon);
                }
                if($(this).is('#selectDestinationAirport')){
                    console.log('kates');
                    $("[name='flightDestinationLat']").val(data.lat);
                    $("[name='flightDestinationLon']").val(data.lon);
                // }
                return data.airportName || data.text;
            }
        });

first take a look that i fire select2 by #selectOriginAirport and selectDestinationAirport

the problem is i need to make a conditional on the templateSelection function but its not work, the result is none of that 2 logical is executed

thats the problem i need to solve i wish you get what i mean Thanks in advance

Answer 1

I checked the source code for select2 and it looks like select2 does pass the container as the second parameter in the templateSelection option. Here's the relevant snippet from the select2.js

SingleSelection.prototype.display = function (data, container) {
  var template = this.options.get('templateSelection');
  var escapeMarkup = this.options.get('escapeMarkup');

  return escapeMarkup(template(data, container));
};

Using that and JSFiddle's /echo/json as a sample AJAX, I've created a working snippet: http://jsfiddle.net/shashank2104/ozy16L8s/2/

Relevant code:

templateSelection: function(selection,inst) {
   if(inst && inst.length) {
       return inst.attr('id') === 'select2-user-email-address-container' ? selection.email : selection.id;
   }
}

Based on the container ID, the appropriate attribute can be chosen. Hope this helps.