Fund Search

by Nico D

HTML

<script src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/knockout-3.0.0.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/format.js"></script>
<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/styles/jqx.apireference.css">
<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.arctic.css">
<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<script src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/json2.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxknockout.js"></script>
<div data-bind=" attr: { id: fundSearch.id() }, jqxComboBox: { width: 250, height: 25,  remoteAutoComplete: true, displayMember: 'name', valueMember: 'countryName', selectedIndex: fundSearch.selectedIndex, minLength: 2, autoDropDownHeight: true }"></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: "xml",
            id: "uid",
            datafields: [{
                name: 'name', type: 'string'
            }, {
                name: 'description', type: 'string'
            }],
            url: "http://www.striges.net/test/search.php",
            // http://api.geonames.org/search?featureClass=P&style=full&maxRows=12&username=jqwidgets&name_startsWith=asdyh&_=1443518952743
            root: "FUNDS",
            record: "FUND",
            data: {
                maxItems: 10
            }
        };

        self.dataAdapter = new $.jqx.dataAdapter(source, {
            async: false,
            formatData: function (data) {
                if (typeof $("#" + 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 (typeof item != 'undefined') {
                label = item.name + "(" + item.countryName + ", " + item.adminName1 + ")";
                return label;
            }
            return "";
        };

        self.renderSelectedItem = function (index, item) {
            item = self.dataAdapter.records[index];
            if (typeof item != 'undefined') {
                var...