knockoutjs template jquery autocomplete - how to populate inputs on autocomplete select? - jquery-ui

Question

I want to populate multiple inputs inside a template after select of an autocomplete item. I'm following http://jsfiddle.net/rniemeyer/MJQ6g/ but not sure how to apply this to multiple inputs.
Model:
<script>
var ContactModel = function (contactsInfo) {
var self = this;
self.Company = ko.observable();
self.ContactsInformation = contactsInfo;
self.Name = ko.observable();
};
var ContactsInformationModel = function () {
var self = this;
self.Address1 = ko.observable();
};
var viewModel;
var ViewModel = function () {
var self = this;
self.Contact1 = new ContactModel(new ContactsInformation);
self.Contact2 = new ContactModel(new ContactsInformation);
};
$(function () {
viewModel = new ViewModel();
ko.applyBindings(viewModel);
});
function getContacts(searchTerm, sourceArray) {
$.getJSON("web_service_uri" + searchTerm, function (data) {
var mapped = $.map(data, function (item) {
return {
label: item.Name,
value: item
};
});
return sourceArray(mapped);
});
}
</script>
Template:
<script type="text/html" id="contact-template">
<div>
Name
<input data-bind="uniqueName: true,
jqAuto: { autoFocus: true, html: true },
jqAutoSource: $root.Contacts,
jqAutoQuery: getContacts,
jqAutoValue: Name,
jqAutoSourceLabel: 'label',
jqAutoSourceInputValue: 'value',
jqAutoSourceValue: 'label'"
class="name" />
</div>
<div>
Company
<input data-bind="value: Company, uniqueName: true" class="company" />
</div>
<div>
Address
<input data-bind="value: ContactsInformation.Address1, uniqueName: true" class="address1" />
</div>
</script>
Html:
<div data-bind="template: { name: 'contact-template', data: Contact1 }">
</div>
<hr/>
<div data-bind="template: { name: 'contact-template', data: Contact2 }">
</div>

Answer 1

If you leave out the jqAutoSourceValue option from your data-bind, then it will set the value equal to the actual object. Then, you can read properties off of that object.
Usually, you would have an observable like: mySelectedPerson and then bind a section (possibly with the with binding) against it and access the individual properties/observables off of that object.
Here is the sample modified to leave out the jqAutoSourceValue option, bind jqAutoValue against an observable called mySelectedPerson and use the with binding to display some properties from the selected object. http://jsfiddle.net/rniemeyer/YHvyL/