<meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxpopup_dhx_skyblue.css"/>
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxForm/codebase/skins/dhtmlxform_dhx_skyblue.css"/>
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxGrid/codebase/dhtmlxgrid.css">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
    
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxpopup.js"></script>
    <script src="../../../dhtmlxForm/codebase/dhtmlxform.js"></script>
    <script src="../../../dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
    <script src="../../../dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
    <script src="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_filter.js"></script>
    
    <style>
        table.obj.row20px tr td img {
            float: left;
            margin-left: 7px;
        }
    </style>
    <script>
 
var myForm;
var myPop;
var myGrid;
var eId;
 
function doOnLoad() {
 
    myForm = new dhtmlXForm("myForm", [{
        type: "settings",
        position: "label-left",
        labelWidth: 110,
        inputWidth: 170
    }, {
        type: "input",
        name: "name",
        label: "Full Name",
        value: "Joe Black"
    }, {
        type: "input",
        name: "email",
        label: "Email",
        value: "joe@mail.com"
    }, {
        type: "input",
        name: "country",
        label: "Country",
        value: "",
        note: {
            text: "Start typing"
        }
    }]);
    myForm.setSkin("dhx_skyblue");
 
    myPop = new dhtmlXPopup({
        form: myForm,
        id: ["country"]
        });
 
    myForm.attachEvent("onFocus", function(id) {
        //myPop.show(id);
        });
 
    //myForm.getInput("title").setAttribute("autocomplete","off");
    myForm.attachEvent("onKeyUp", function(input, e) {
 
        if (!myGrid)
            return
        if (myPop.isVisible()) {
            if (e.keyCode == 38) {
                // up
                var id = myGrid.getSelectedRowId();
                if (id != null) {
                    var ind = myGrid.getRowIndex(id);
                    myGrid.selectRow(ind - 1);
                } else {
                    myGrid.selectRow(0);
                }
            }
            if (e.keyCode == 40) {
                // down
                var id = myGrid.getSelectedRowId();
                if (id != null) {
                    var ind = myGrid.getRowIndex(id);
                    myGrid.selectRow(ind + 1);
                } else {
                    myGrid.selectRow(0);
                }
            }
            if (e.keyCode == 13) {
                // enter
                var id = myGrid.getSelectedRowId();
                if (id != null && myGrid.getRowIndex(id) >= 0) {
                    myGrid.callEvent("onRowDblClicked", [id]);
                }
            }
        } else {
            if (e.keyCode == 113) {
                // f2
                myPop.show();
            }
        }
    });
 
    myForm.attachEvent("onInputChange", function(id, value) {
        if (!myGrid) {
            if (!myPop.isVisible())
                myPop.show("country");
            return;
        }
        //myGrid.filterBy(1,"");
        if (!myPop.isVisible())
            myPop.show("country");
        if (myGrid._loaded) {
            myGrid.filterBy(1, value);
            selectRowIfNotSelected();
        }
    });
 
    eId = myPop.attachEvent("onShow", function() {
 
        myGrid = myPop.attachGrid(300, 200);
        myGrid.setImagePath("../../../dhtmlxGrid/codebase/imgs/")
            myGrid.loadXML("../common/grid2.xml?etc=" + new Date().getTime(), function() {
            myGrid.filterBy(1, myForm.getItemValue("country"));
            myGrid.selectRow(0);
            myGrid._loaded = true;
        });
 
        myGrid.attachEvent("onRowDblClicked", function(id) {
            myForm.setItemValue("country", myGrid.cells(id, 1).getValue());
            myPop.hide();
            myGrid.clearSelection();
        });
 
        myPop.detachEvent(eId);
 
    });
 
    myPop.attachEvent("onShow", function() {
        if (!myGrid)
            return;
        //myGrid.filterBy(0,"");
        //myGrid._f_rowsBuffer = null;
        if (myGrid._loaded) {
            myGrid.filterBy(1, myForm.getItemValue("country"));
        }
        selectRowIfNotSelected();
    });
}
 
function selectRowIfNotSelected() {
    var id = myGrid.getSelectedRowId();
    if (!id) {
        myGrid.selectRow(0);
    } else {
        if (myGrid.getRowIndex(id) < 0)
            myGrid.selectRow(0);
    }
}</script>
    <style>
        
        
    </style>
 
 
    <div id="myForm"></div>