select2 - keep extra info

Question

Hi I'm using select2 and I need to achieve the following: When the server returns the data(based off what the user typed) I need to bring an extra info (other than id and text) and keep it for later use.

Here's my code:

            $("select[name='address-city']").select2({
            language: 'pt-BR',
            placeholder: "Selecione a cidade...",
            tags: true,
            minimumInputLength: 3,
            ajax: {
                url: 'Account/Cities/Find/',
                dataType: 'json',
                type: "GET",
                quietMillis: 50,
                processResults: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return {
                                text: item.Name,
                                //slug: item.slug,
                                id: item.Id,
                                cc: item.State
                            }
                        })
                    };
                }
            }
        }).change(function () {
            //I NEED THAT "cc"EXTRA INFO HERE
        });

Here is array the server returns(it's already working fine):

[{"Id":1,"Name":"Porto Alégre","State":"RS"}]

So, notice in my code where I put the comment "//I NEED THAT "cc"EXTRA INFO HERE" and let me know how to achieve such thing, please.

I thought of something like this:

var extraInfo = $(this).select2('data').cc;

...but is seems not to work.

Thanks in advance.

Answer 1

Thought I would post you an answer thats probably better for you because your way is what I would consider messy.

So this is my JSON for example:

{  
"results":[  
  {  
     "id":1,
     "text":"Random Name",
     "customer_id":1,
     "customer_name":"Random Name"
  },
  {  
     "id":1454,
     "text":"Random Name",
     "customer_id":3338,
     "customer_name":"Random Name"
  },
  {  
     "id":1038,
     "text":"Random Name",
     "customer_id":3190,
     "customer_name":"Random Name"
  },
  {  
     "id":1039,
     "text":"Random Name",
     "customer_id":3340,
     "customer_name":"Random Name"
  }
}

Now my JS for the ajax part of select2, the processResults is key here:

$("#boat-select").select2({
    ajax: {
        url: "{!! url('boats/json') !!}",
        dataType: "json",
        data: function (term) {
            return {query: term.term }
        },
        results: function (data) {
            return {
                results: data.results
            };
        },
        processResults: function (data) {
            return {
                results: $.map(data.results, function (item) {
                    console.log(item);
                    return {
                        text: item.text,
                        id: item.id,
                        cust_id: item.customer_id,
                        cust_name: item.customer_name,
                    }
                })
            };
        }
    },
    createSearchChoice: function (term, data) {
        if ($(data.results).filter(function () {
                    return this.text.localeCompare(term) === 0;
                }).length === 0) {
            return {
                id: term,
                text: term
            };
        }
    },
    width: '100%',
});

Now to access those extra fields use something like this:

$('#boat-select').on('select2:select', function(evt){
    cust_id = evt.params.data.cust_id;
    cust_name = evt.params.data.cust_name;

    var opt = "<option value='"+cust_id+"' selected ='selected'>" + cust_name + " </option>";
    $("#customer-select").html(opt);
    $("#customer-select").val(cust_id).trigger("change");
});

The above listener is actually used to set the select2 value of another select2 depending on what boat is selected it will set the customer select box that owns that boat in case you wondered what I was doing there.

Hope this helps you.

Answer 2

my solution at the time might have not been the fanciest one, but it did the trick. So the solution I came up with, was:

processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    text: item.Name + '-' + item.State,
                                    id: item.Id + "|" + item.State,
                                }
                            })
                        };
                    }

and...

if($(this).val().indexOf('|') > 0){
                        var data = $(this).val().split('|');
                        cityId = data[0];
                        stateId= data[1];
                        ...

so as you can see, I joined those 2 pieces of info I needed and than afterwards, I restored them, using split().

Again, that might not have been the best solution, but since nobody seems to know... it's better having somthing working than nothing at all, right?

Hope l could've helped anyone.