JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.0.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css">
<input type="text" class="validatable autocomplete" id="CompanyName" name="Job.CompanyName" placeholder="Company Name" data-bind="value: Job.CompanyName" data-error="Company Name"/>

<a href="#" data-bind="click: add">Add</a>

JavaScript

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"],
  select: function(event, ui) {
    $(this).val(ui.item.value).change();
  }
});

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

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