<div data-bind="foreach: techniques"> <label> <input type="radio" data-bind="value: value, checked: $parent.selectedTechnique" /> <span data-bind="text: text"></span> </label> </div> <div data-bind="text: selectedTechniqueText"></div>
function ViewModel() { var self = this; self.techniques = [{ text: "ASP.NET Web Forms", value: "webforms" }, { text: "ASP.NET MVC", value: "mvc" }, { text: "ASP.NET Web API", value: "webapi" }]; self.selectedTechnique = ko.observable(""); self.selectedTechniqueText = ko.computed(function () { var search = self.selectedTechnique().toLowerCase(); if (!search) { return null; } else { var matchedItem = ko.utils.arrayFirst(self.techniques, function (item) { return ko.utils.stringStartsWith(item.value.toLowerCase(), search); }); return matchedItem.text; } }); } ko.applyBindings(new ViewModel());