Select2 - pass additional data through ajax call

Question

Well, it seems to me that I'm losing my mind. I am using select2 jquery plugin (version 4) and retrieving data via ajax. So you can enter a name and it will return that contact information. But I also want to return the organization in which the contact is part.

Here is my select2 initialization:

$('#contact_id').select2({ ajax: { url: 'example.com/contacts/select', dataType: 'json', delay: 250, data: function (params) { return { q: params.term, page: params.page }; }, processResults: function (data) { return { results: data }; }, cache: true }, minimumInputLength: 3, maximumSelectionLength: 1 }); 

And here is the data I return (laravel framework):

 foreach($contacts as $con) { $results[] = [ 'id' => $con->contact_id, 'text' => $con->full_name, 'org' => [ 'org_id' => $con->organization_id, 'org_name' => $con->org_name ] ]; } return response()->json($results); 

So, not "org" should be attached either to the created parameter or to the select2 element? So I could do something like $('#contact_id').select2().find(':selected').data('data').org or $('#contact_id').select2().data('data').org or something like that?

Ideally, it would look like this:

 <select> <option value="43" data-org="{org_id:377, org_name:'Galactic Empire'}">Darth Vader</option> </select> 

I swear I confirmed that this worked last week, but now completely ignores this org property. I have confirmed that the returned json data includes org with the proper org_id and org_name. I could not dig anything on the Internet, only this piece of documentation :

Identifier and text properties are required for each object, and these are the properties that Select2 uses for internal data objects. Any additional parameters passed with the data objects will be included in the data objects that Select2 provides.

So can someone help me? I have already spent a couple of hours on this.

EDIT: Since I have no answers, my current plan is to use the processResults to create hidden input fields or JSON blocks, which I will reference later in my code. I feel that this is a hacker decision, given the situation, but if there is no other way, then what will I do. I would prefer to make another ajax call to get the organization. When I begin to implement it, I will send my decision.

Answer 1

I don’t remember what I did wrong, but with processResults(data) data contains the complete answer. In my implementation below, I access this information when I select an item:

 $('#select2-box').select2({ placeholder: 'Search Existing Contacts', ajax: { url: '/contacts/typeahead', dataType: 'json', delay: 250, data: function(params){ return { q: params.term, type: '', suggestions: 1 }; }, processResults: function(data, params){ //Send the data back return { results: data }; } }, minimumInputLength: 2 }).on('select2:select', function(event) { // This is how I got ahold of the data var contact = event.params.data; // contact.suggestions ... // contact.organization_id ... }); // Data I was returning [ { "id":36167, // ID USED IN SELECT2 "avatar":null, "organization_id":28037, "text":"John Cena - WWE", // TEXT SHOWN IN SELECT2 "suggestions":[ { "id":28037, "text":"WWE", "avatar":null }, { "id":21509, "text":"Kurt Angle", "avatar":null }, { "id":126, "text":"Mark Calaway", "avatar":null }, { "id":129, "text":"Ricky Steamboat", "avatar":null }, { "id":131, "text":"Brock Lesnar", "avatar":null } ] } ] 

Answer 2

I can not comment (low reputation) .. so ... the answer to the spot:

Including additional data (v4.0):

 processResults: function (data) { data = data.map(function (item) { return { id: item.id_field, text: item.text_field, otherfield: item.otherfield }; }); return { results: data }; } 

Reading data:

 var data=$('#contact_id').select2('data')[0]; console.log(data.otherfield);