Basic knockout-jqAutocomplete samples

by arame3333

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>
    <tr>
        <th>basic strings</th>
        <th>object properties</th>
        <th>using a template</th>
        <th>remote data</th>
    </tr>
    <tr>
        <td>
            <input data-bind="jqAuto: { source: stringChoices, value: stringValue }" />
        </td>
        <td>
            <input data-bind="jqAuto: { source: objectChoices, value: objectValue, inputProp: 'name', valueProp: 'id', labelProp: 'myLabel'  }" />          
        </td>
        <td>
            <input data-bind="jqAuto: { source: objectChoices, value: templateValue, inputProp: 'name', template: 'itemTmpl'  }" />
        </td>
        <td>
            <input data-bind="jqAuto: { source: remoteHandler, value: remoteValue, inputProp: 'test', labelProp: 'test', valueProp: 'val', options: { delay: 250 } }" />
        </td>
    </tr>
    <tr>
        <td>
            <pre data-bind="text: ko.toJSON(stringValue)"></pre>
        </td>
        <td>
            <pre data-bind="text: ko.toJSON(objectValue)"></pre>
        </td>
        <td>
            <pre data-bind="text: ko.toJSON(templateValue, null, 2)"></pre>
        </td>
        <td>
            <pre data-bind="text: ko.toJSON(remoteValue)"></pre>
        </td>
    </tr>
</table>

<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() {
    this.objectValue = ko.observable();
    this.stringValue = ko.observable();
    this.templateValue = ko.observable();
    this.remoteValue = ko.observable();
    
    this.objectChoices = [];
    this.stringChoices = [];
    
    for (var i = 0; i < 100; i++) {
        this.objectChoices.push({ id: i, name: "item " + i, myLabel: "item label " + i });
        this.stringChoices.push("item " + i);
    }
    
    this.remoteHandler = function(term, callback) {
        setTimeout(function() {
            callback([
                { test: term + "-1", val: 1 },
                { test: term + "-2", val: 2 },
                { test: term + "-3", val: 3 },
                { test: term + "-4", val: 4 },
                { test: term + "-5", val: 5 }
            ]);
        }, 500);
    }
};

ko.applyBindings(new ViewModel());