jQuery UI autocomplete

https://groups.google.com/d/topic/knockoutjs/ABhEeI7jLKA/discussion

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/knockout-latest.debug.js"></script>
<div class="tableContainer">
    <table id="alertingDetails">
        <tbody class="scrollable" data-bind="template: {name:'actionTemplate', foreach: actions()}"></tbody>
    </table>
</div>
<script type="text/x-jquery-tmpl" id="actionTemplate">
    <tr class="actionItem" data-bind="click: function() {actionListViewModel.selectedActionId(id)}"> 
        <td>${description}</td>
    </tr>
</script>


<div id="editActionDialog" data-bind="template: {name: 'editActionTemplate', data: selectedAction()}"></div>
<script type="text/html" id="editActionTemplate">
    <div class="actionInfo">
        <h1>${id}</h1>
    </div>
</script>

JavaScript

//Defines the ViewModel for use on the Alerting and Notification Screen
function action(id, description, ownerViewModel) {
    this.id = ko.observable(id);
    this.description = ko.observable(description);
}

function actionListViewModel () {
    this.actions = ko.observableArray([]);
    this.selectedActionId = ko.observable();
    
    //Load initial state
    var self = this;
    var action1 = new action(1, "Test1 Description", self);
    var action2 = new action(2, "Test2 Description", self);
    self.actions.push(action1);
    self.actions.push(action2);


    this.selectedAction = ko.dependentObservable(function () {
        var actionToFind = this.selectedActionId();
        return ko.utils.arrayFirst(this.actions(), function (action) { return action.id == actionToFind });
    }, this);
    
};


//Page load event for Alerting and Notification screen - called from lfonAct
    
    ko.applyBindings(new actionListViewModel());