Fund Search 2

by Nico D

HTML

<script src="https://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-demo/scripts/knockout-3.0.0.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-demo/scripts/format.js"></script>
<link rel="stylesheet" href="https://www.jqwidgets.com/jquery-widgets-demo/styles/jqx.apireference.css">
<link rel="stylesheet" href="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.arctic.css">
<link rel="stylesheet" href="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<script src="https://www.jqwidgets.com/jquery-widgets-demo/scripts/json2.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxknockout.js"></script>
<div data-bind=" attr: { id: fundSearch.id() }, jqxComboBox: { width: 250, height: 25,  remoteAutoComplete: true, autoDropDownHeight: true, displayMember: 'name', valueMember: 'countryName', 'selectedIndex': fundSearch.selectedIndex }"></div>
<br /><br />
<span data-bind='text: fundSearch.selectedItem() == null ? "" : fundSearch.selectedItem().label + " (" +fundSearch.selectedItem().value + ")"'></span>

JavaScript

function guid() {
    function s4() {
        return Math.floor((1 + Math.random()) * 0x10000)
            .toString(16)
            .substring(1);
    }

    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}

var viewModel = function () {
    var root = this;

    root.fundSearch = (function () {
        var self = this;
        self.id = ko.observable();
        self.id(guid());

        self.selectedItem = ko.observable();
        self.selectedIndex = ko.observable(1);
        // prepare the data
        var source = {
            datatype: "jsonp",
            datafields: [{
                name: 'countryName'
            }, {
                name: 'name'
            }, {
                name: 'population',
                type: 'float'
            }, {
                name: 'continentCode'
            }, {
                name: 'adminName1'
            }],
            url: "http://api.geonames.org/searchJSON",
            data: {
                featureClass: "P",
                style: "full",
                maxRows: 12,
                username: "jqwidgets"
            }
        };

        self.dataAdapter = new $.jqx.dataAdapter(source, {
            formatData: function (data) {
                if ($("#" + self.id()).jqxComboBox('searchString') != undefined) {
                    data.name_startsWith = $("#" + self.id()).jqxComboBox('searchString');
                    return data;
                }
            }
        });

        self.renderer = function (index, label, value) {
            var item = self.dataAdapter.records[index];
            if (item != null) {
                var label = item.name + "(" + item.countryName + ", " + item.adminName1 + ")";
                return label;
            }
            return "";
        };

        self.renderSelectedItem = function (index, item) {
            var item = self.dataAdapter.records[index];
            if (item != null) {
                var label =...