Knockout and Select2 get selected object

Question

I am working on a project where im uses .net web api, knockout, and in this example the jquery select2 plugin .

What I'm trying to do is set some field values ​​after changing the selection. Select2 control list is loaded after ajax call and objects contain more data than just id and text. How can I get the rest of the data, so I can fill in other inputs? Soon im trying to update the view model after changing the selection (but I get the data when this plugin makes an ajax call).

Here is an example of the data that the selected object should contain:

{ "Customer":{ "ID":13, "No":"0000012", "Name":"SomeName", "Address":"SomeAddress", "ZipCode":"324231", "City":"SimCity", "Region":"SS", "Phone":"458447478", "CustomerLocations":[] } } 

This is where I am now:

Html example:

 <input type="hidden" data-bind="select2: { optionsText: 'Name', optionsValue: 'ID', sourceUrl: apiUrls.customer, model: $root.customer() }, value: CustomerID" id="CustomerName" name="CustomerName" /> <input type="text" data-bind="........" /> <input type="text" data-bind="........" /> etc... 

and this is a custom binding:

 ko.bindingHandlers.select2 = { init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var obj = valueAccessor(), allBindings = allBindingsAccessor(); var optionsText = ko.utils.unwrapObservable(obj.optionsText); var optionsValue = ko.utils.unwrapObservable(obj.optionsValue); var sourceUrl = ko.utils.unwrapObservable(obj.sourceUrl); var selectedID = ko.utils.unwrapObservable(allBindings.value); var model = ko.utils.unwrapObservable(obj.model);//the object that i need to get/set $(element).select2({ placeholder: "Choose...", minimumInputLength: 3, initSelection: function (element, callback) { if (model && selectedID !== "") { callback({ id: model[optionsValue](), text: model[optionsText]() }); } }, ajax: { quietMillis: 500, url: sourceUrl, dataType: 'json', data: function (search, page) { return { page: page, search: search }; }, results: function (data) { var result = []; $.each( data.list, function( key, value ) { result.push({ id: value[optionsValue], text: value[optionsText] }); }); var more = data.paging.currentPage < data.paging.pageCount; return { results: result, more: more }; } } }); ko.utils.domNodeDisposal.addDisposeCallback(element, function () { $(element).select2('destroy'); }); }, update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var obj = valueAccessor(), allBindings = allBindingsAccessor(); var model = ko.utils.unwrapObservable(obj.model);//the object that i need to get/set var selectedID = ko.utils.unwrapObservable(allBindings.value); $(element).select2('val', selectedID); $(element).on("change", function (e) { //... }); } }; 

Getting the selected identifier or text is not a problem, but how not to lose the rest of the information after calling ajax? Where can I set / get this object so that I can have all the data it contains?

thanks

Answer 1

When you are building an object literal for your results, add the full object as the "data" property.

 result.push({ id: value[optionsValue], text: value[optionsText], data: value }); 

Then handle the select2 event selected by select2. An event object must contain its object literal as a selection property.

 $element.on('select2-selected', function(eventData) { if ( eventData.choice ) { // item selected var dataObj = eventData.choice.data; var selectedId = eventData.choice.id; } else { // item cleared } }); 

Answer 2

For select2 v4, you can use $(elem).select2('data') to get the selected objects.

 $('selected2-enabled-elements').on('change', function(e) { console.log($(this).select2('data')); }); 

Example: https://jsfiddle.net/calvin/p1nzrxuy/

Answer 3

For versions of select2 before v4.0.0 you can:

 .on("select2-selecting", function (e) { console.log(e.object); }) 

Starting with version 4.0.0 and higher, the following should work:

 .on("select2-selecting", function (e) { $(this).select2('data') })