Autocomplete up-down key navigation in JqGrid

Question

I got JqGrid with modified cellEdit ( full up-down-left-right cell navigation ).

Here is bits of jqgrid.src:

                if (e.keyCode === 37)  {
                    if(!$t.grid.hDiv.loading ) {
                        {$($t).jqGrid("prevCell",iRow,iCol);} //left
                    } else {
                        return false;
                    }
                }
                if (e.keyCode === 39)  {
                    if(!$t.grid.hDiv.loading ) {
                        {$($t).jqGrid("nextCell",iRow,iCol);} //right
                    } else {
                        return false;
                    }
                }
                if (e.keyCode === 38)  {
                    if(!$t.grid.hDiv.loading ) {
                        {$($t).jqGrid("prevRow",iRow,iCol);} //up
                    } else {
                        return false;
                    }
                }   
                if (e.keyCode === 40)  {
                    if(!$t.grid.hDiv.loading ) {
                        {$($t).jqGrid("nextRow",iRow,iCol);} //down

                    } else {
                        return false;
                    }
                }

and others

    nextCell : function (iRow,iCol) {
    return this.each(function (){
        var $t = this, nCol=false, i;
        if (!$t.grid || $t.p.cellEdit !== true) {return;}
        // try to find next editable cell
        for (i=iCol+1; i<$t.p.colModel.length; i++) {
            if ($t.p.colModel[i].editable ===true && $t.p.colModel[i].hidden !== true ) {
                //alert($t.p.colModel[i-1].hidden);
                nCol = i; break;
            }
        }
        if(nCol !== false) {
            $($t).jqGrid("editCell",iRow,nCol,true);
        } else {
            if ($t.p.savedRow.length >0) {
                $($t).jqGrid("saveCell",iRow,iCol);
            }
        }
    });
},
prevCell : function (iRow,iCol) {
    return this.each(function (){
        var $t = this, nCol=false, i;
        if (!$t.grid || $t.p.cellEdit !== true) {return;}
        // try to find next editable cell
        for (i=iCol-1; i>=0; i--) {
            if ($t.p.colModel[i].editable ===true && $t.p.colModel[i].hidden !== true ) {
                nCol = i; break;
            }
        }
        if(nCol !== false) {
            $($t).jqGrid("editCell",iRow,nCol,true);
        } else {
            if ($t.p.savedRow.length >0) {
                $($t).jqGrid("saveCell",iRow,iCol);
            }
        }
    });
},
prevRow : function (iRow,iCol) {
    return this.each(function (){
        var $t = this, nCol=false, i;
        if (!$t.grid || $t.p.cellEdit !== true) {return;}
        // try to find next editable cell
        iRow--;
        iCol++;
        for (i=iCol-1; i>=0; i--) {
            if ( $t.p.colModel[i].editable ===true) {
                nCol = i; break;
            }
        }
        if(nCol !== false) {
            $($t).jqGrid("editCell",iRow,nCol,true);
        } else {
            if ($t.p.savedRow.length >0) {
                $($t).jqGrid("saveCell",iRow,iCol);
            }
        }
    });
},
nextRow : function (iRow,iCol) {
    return this.each(function (){
        var $t = this, nCol=false, i;
        if (!$t.grid || $t.p.cellEdit !== true) {return;}
        // try to find next editable cell
        iRow++;
        iCol++;
        for (i=iCol-1; i>=0; i--) {
            if ( $t.p.colModel[i].editable ===true) {
                nCol = i; break;
            }
        }
        if(nCol !== false) {
            $($t).jqGrid("editCell",iRow,nCol,true);
        } else {
            if ($t.p.savedRow.length >0) {
                $($t).jqGrid("saveCell",iRow,iCol);
            }
        }
    });
}

Also i got autocomplete working with JqGrid event afterEditCell:

getautocompl = function(rowid,cellname,value,iRow,iCol){
setTimeout(function() { $("#"+iRow+"_"+cellname).select().focus();},10);
if(cellname!=='date_factory' || cellname!=='date_otgr_factory' || cellname!=='date_shipment' || cellname!=='date_sklad' || cellname!=='kolinkor'
|| cellname!=='kolkor' || cellname!=='kol_quantity' || cellname!=='description') {
    $("#"+iRow+"_"+cellname).autocomplete({
        source:"../../phpmon/autocomplete.php?fname="+cellname,
        delay:250,
        minLength: 2});
}

}

Problem here is that i cant manage autocomplete hotkeys to work, when i hit "down" button it just goes to next cell, rather then to any of the autocomplete options.

Answer 1

Its not quite what i needed, but it helped me to make it.

I just modified jqgrid source code like this :

if (e.keyCode === 40)  {
                    if(!$t.grid.hDiv.loading ) {
                        if ($('.ui-menu-item').length < 1) {
                        {$($t).jqGrid("nextRow",iRow,iCol);} //down
                        }
                    } else {
                        return false;
                    }
                }

Where .ui-menu-item is class of autocomplete widget.

thk a lot

Answer 2

you could suppress jqgrid navigation when autocomplete element is visible. something like:

$(document).keydown(function( fn ){
      var key = fn.keyCode;
      if( $("#autocomplete") && key == 40)
           /* your autocomplete action*/
});