jQuery ui autocomplte in jQGrid popup position issue

Question

I have following code in jQgrid and I am using jQuery ui autocomplete in one of the field. But the pop up of autocomplete displays somewhere else as shown in figure. From IE developer tools I noticed the results are attached to body tag, which is at the end of the page. I tried using appendTo, but that doesn't help.

{
                    name: 'nameAccount',
                    index: 'nameAccount',
                    width: 300,
                    editable: true, sortable: false, resizable: false,
                    shrinkToFit: true
                        ,editoptions: {
                            dataInit: function (elem) {
                             var autocompleteSource = function(request, response,term) {  
                                 var param = request.term;
                                 $.ajax({
                                     url: myUrl,
                                     contentType: "application/json; charset=utf-8",
                                     dataType: "json",
                                     type: "GET",

                                     success: function (myyydata) {
                                         //alert('HI-Success');
                                         //response( myyydata );
                                         response($.map(myyydata, function (item) {
                                             return {
                                    label: item.AccountInfo,
                                    value: item.AccountInfo
                                }
                            }));
                                     } ,
                                     error: function (res, status) {
                                         alert('HI-error');
                                         //alert(res.status+" : "+res.statusText+". Status: "+status);
                                     }
                                 });//END AJAX
                             };
                            $(elem).autocomplete({
                                source: autocompleteSource,
                              //appendTo: "#"+elem.id,
                                position: {  collision: "flip"  },
                                minLength: 2
                            });//END AUOTOCOMPLETE
                         }//END Dataint
                         }//END Dataint
                },

Answer 1

minnu4515. i guess it is because of the css misalignment. i faced the similar problem and i manually set the z-index alignmnet. that solved my issue.

$('.ui-autocomplete').css('zIndex',1000);