Basic knockout-jqAutocomplete samples

by bz bz

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<script src="https://rawgithub.com/rniemeyer/knockout-jqAutocomplete/master/build/knockout-jqAutocomplete.js"></script>
<table>
    <thead>
        <tr><th>No observable</th><th>Observable</th>
    </thead>
    <tbody>
    <tr><td>    
        <table border="1" >
            <thead>
                <tr><th>id</th><th>name</th><th>email</th></tr>
            </thead>
            <tbody data-bind="foreach: myOptions">
                <tr>
                    <td data-bind="text: id"></td>
                    <td data-bind="text: name"></td>
                    <td data-bind="text: description"></td>
                </tr>
            </tbody>
        </table>        
    </td><td>
        <table border="1" >
            <thead>
                <tr><th>id</th><th>name</th><th>email</th></tr>
            </thead>
            <tbody data-bind="foreach: myOptionsObs">
                <tr>
                    <td data-bind="text: id"></td>
                    <td data-bind="text: name"></td>
                    <td data-bind="text: description"></td>
                </tr>
            </tbody>
        </table>      
    </td></tr>
    <tr><td>    
<input data-bind="jqAuto: { source: myOptions, value: myValue, inputProp: 'name', valueProp: 'id', labelProp: 'description'  }" />          
    </td><td>

<input data-bind="jqAuto: { source: myOptionsObs,  value: myValueObs, inputProp: 'name', template: 'itemTmpl'  }" />          
    </td></tr>        
    <tr><td>    
<pre data-bind="text: ko.toJSON(myValue)"></pre>
    
    </td><td>

<pre data-bind="text: ko.toJSON(myValueObs, null, 2)"></pre>
    </td></tr></tbody>
</table>   
<p><p>
    


<p><p>
    
    
<script id="itemTmpl" type="text/html">
    <a>
        <strong data-bind="text: id"></strong>
        <em data-bind="text: name"></em>
    </a>
</script>

JavaScript

var ViewModel = function() {
    var self = this;
    
//    self.myOptions = [];

    self.myOptions = ko.observableArray([
        { id: 1, name: "item 1", description: "item label 1" },
        { id: 2, name: "item 2", description: "item label 2" },
        { id: 3, name: "item 3", description: "item label 3" }
	]);


    self.myOptionsObs = ko.observableArray([
        { id: ko.observable(1), name: ko.observable("item 1 o"), description: ko.observable("item label 1 o") },
        { id: ko.observable(2), name: ko.observable("item 2 o"), description: ko.observable("item label 2 o") },
        { id: ko.observable(3), name: ko.observable("item 3 o"), description: ko.observable("item label 3 o") }
	]);

    
    
    self.myValue = ko.observable();
    self.myValueObs = ko.observable();
    
};

ko.applyBindings(new ViewModel());