jqGrid Autocomplete onitemSelect event not firing

See more:

ASP.NET

jQuery

Hi Friends,

I am working on jqGrid. In that i have to edit in cell itself.

While editing Recipe Name their should be Autocmplete.I am getting Auotocomplte.

But when i select it by Kyebord, its not getting Selected.But if i select any value with mouse its get selected.

I don't know what is the problem. I am providing the code below.

$("#Top10Recipes").jqGrid({
            url:'Handlers/Top10RecipeHandler.ashx',
            editurl:'Handlers/Top10RecipeHandler.ashx',
            datatype:"xml",
            mytype:"GET",
            width:736,
            height:"100%",
            colNames:['Sequnce','Recipe Name','Modified By','Modified On'],
            colModel:[
                {name:'Top10RecipeID',index:'Top10RecipeID',editable:false,width:60},
                {name:'RecipeName',index:'RecipeName',editable:true,edittype: 'text',editoptions:{dataInit:function(elem){
                       setTimeout(function(){ //alert(elem);
                            $(elem).autocomplete("Handlers/AutocompleteHandler.ashx",{
                                matchContains: true,
                                minChar: 0,
                                //onItemSelect:elem,
                                autoFill:true
                            });
                            $(elem).result(function(event, data, formatted){ ///here i m not getting event properly
                                 if (data) { 
                                    $("#Top10RecipeID").val(data[0]);
                                    }
                            });
                       },200)
                    }
                    },editrules: { required: true }
                },
                {name:'ModifiedBy',index:'ModifiedBy',editable:false},
                {name:'ModifiedOn',index:'ModifiedOn',editable:false,sorttype: 'datetime'}
            ],
            pager:pager,
            caption:"Top 10 Recipes",
            sortname:"Top10RecipeId",
            cellEdit:true,
            rowNum:10,
            sorttype:'Asc',
            rowList:[10,20,30],
            viewrecord:true,
            cellsubmit:'clientArray',
            afterSaveCell:function(rowid,name,val,iRow,iCol){
                if(name=='RecipeName'){
                   $.post("Handlers/Top10RecipeHandler.ashx",{oper:'edit',id:rowid,value:val},function(data){});
                }
            }
        }).navGrid("#pager",{edit:true,add:false,del:true,search:true},
            { reloadAfterSubmit: true, jqModel: true, closeOnEscape: true}, //edit
               {reloadAfterSubmit: true, jqModel: true, closeOnEscape: true, closeAfterAdd: true}, //add
               {reloadAfterSubmit: true, jqModel: true, closeOnEscape: true, closeAfterAdd: true}//del
        )

I hope i am making it clear.

please help me in this regard.

Thanks in Advance.