var cityTemplate = new org.iit.Template({
    id: "cityTemplate",
    templateText: "<div class='item'>{this.makeBold(get('name'), this.search)} <span style='color: gray'>{get('code')}</span></div>"
});

cityTemplate.makeBold = function(source, search) {
    if ( search ) {
        var r = new RegExp("(^"+search+")", "gi");
        return source.replace(r, "<b>$1</b>");
    } else {
        return source;
    }
};

var cityStore = new org.iit.data.DataStore("cityStore", [
     new org.iit.data.DataStoreField("id", "integer", true),
     new org.iit.data.DataStoreField("name", "string"),
     new org.iit.data.DataStoreField("code", "string")
]);

var cityAdapter = new org.iit.data.JsonDataAdapter({
    url: "/service/getCities.php",
    countParams: { action: "count" },
    searchParams: { action: "search" },
    supportPagination: false,
    supportSearch: false
});

cityStore.setAdapter(cityAdapter);

framework.onLoad.add(function(){

    var from = framework.query("input[name='from']")[0];
    var to = framework.query("input[name='to']")[0];
    var cs = framework.getComputedStyle(from);

    from.style.width = cs.width;

    var from = new org.iit.SuggestInput({
        id: "from",
        name: "from",
        element: from,
        store: "cityStore",
        itemTemplate: "cityTemplate",
        valueField: "name",
        criteria: "beginsWith"
    });

    cs = from.getElement().style;
    cs.margin = "5px 18px 0px 0px";
    cs.styleFloat = "left"; cs.cssFloat = "left";

    from.render();

    cs = framework.getComputedStyle(to);
    to.style.width = cs.width;

    var to = new org.iit.SuggestInput({
        id: "to",
        name: "to",
        element: to,
        store: "cityStore",
        itemTemplate: "cityTemplate",
        valueField: "name",
        criteria: "beginsWith"
    });

    cs = to.getElement().style;
    cs.margin = "5px 18px 0px 0px";
    cs.styleFloat = "left"; cs.cssFloat = "left";
    to.render();

    cs = framework.getComputedStyle(framework.query("input.text-value", to.getElement())[0]);
});