ComboBox Geonames binding

by krustev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<input id="ddl" /><input id="combobox" /><input id="autocomplete" />

JavaScript

$("#ddl").kendoDropDownList({
    height: 300,
    optionLabel: "select...",
    index: 0,
    dataTextField: "name",
    dataValueField: "name",
    dataSource: {
        serverFiltering: true,
        transport: {
            read: {
                url: "http://ws.geonames.org/searchJSON",
                dataType: "json",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: function() {
                        return "g";
                    }
                }
            }
        },
        schema: {
            data: "geonames"   
        }
    }
});

$("#combobox").kendoComboBox({
    index: 0,
    dataTextField: "name",
    dataValueField: "name",
    filter: "startswith",
    dataSource: {
        serverFiltering: true,
        transport: {
            read: {
                url: "http://ws.geonames.org/searchJSON",
                dataType: "json",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: function() {
                        return $("#combobox").data("kendoComboBox").text();
                    }
                }
            }
        },
        schema: {
            data: "geonames"   
        }
    }
});

$("#autocomplete").kendoAutoComplete({
    dataTextField: "name",
    animation: false,
    dataSource: {
        serverFiltering: true,
        transport: {
            read: {
                url: "http://ws.geonames.org/searchJSON",
                dataType: "json",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: function() {
                        return $("#autocomplete").val();
                    }
                }
            }
        },
        schema: {
            data:...