JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<input type="text" id="mainLookup" data-bind="value: userInput" />
<br />
<br />
<input type="text" id="data1" data-bind="value: data1" />
<br />
<br />
<input type="text" id="data2" data-bind="value: data2" />
<br />
<br />
<select id="data3">
    <option value="1">Value1
    </option>
            <option value="2">Value2
    </option>
</select>

JavaScript

//$('#mainLookup').change(function() {
//    console.log('changed');
//    $('#data1').val('test');
//    $('#data2').val('test2');

//    $("#data3 option[value=2]").attr("selected", "selected");
//});

//A user types "123" into "mainLookup".  This value is passed to the datalayer which returns a model.
//The model populates values in data1, data2 and data3

//I tried doing this task with KO and I got lost in the implementation:

var ViewModel = function () {
    var self = this;
    self.data1 = ko.observable();
    self.data2 = ko.observable();
    self.userInput = ko.observable();
    self.userInput.subscribe(function (newValue) {
        setTimeout(function () {
            self.data1("test1");
            self.data2("test2");
        }, 1000);
    });
};

ko.applyBindings(new ViewModel());