jquery-ui autocomplete select does not update knockout observable property

Question

JSFiddle: http://jsfiddle.net/abepark/rzeNC/7/

I am having an issue where the ko.observable property Job.CompanyName is not updating after you select a choice from the autocomplete dropdown.

Is there anyway to have the ko.observable property updated without creating a custom binder?

var model = {
  Job: {
    CompanyName: "Test" 
  }
};

var InterviewViewModel = function (data) {
  ko.mapping.fromJS(data, {}, this);
  this.add = function (data) {
    console.log("click");
    console.log(this.Job.CompanyName());
  }.bind(this);
}

$("#CompanyName").autocomplete({
  source: ["Test", "cool", "what", "Example", "Cookies"]
});

var viewModel = new InterviewViewModel(model);
ko.applyBindings(viewModel);

viewModel.Job.CompanyName.subscribe(function (val) {
  console.log(val);
});

Answer 1

For me your sample work but value is logged into console when you leave textbox. That's default behavior of knockout.

You can add select function in autocomplete like here: http://jsfiddle.net/jLtPu/4/. It should resolve your problem.

select: function(event, ui) {
    $(this).val(ui.item.value).change();
}