如何在jqGrid jqueryui自动完成中锚定下拉菜单

Question

jqGrid文本框包含jQuery UI自动完成功能。

我尝试根据Add multiple input elements in a custom edit type field中的Oleg精彩回答添加按钮以打开下面的组合代码。

如果下拉菜单打开并且滚动了jqgrid，则下拉菜单位置不会改变。

如何将下拉菜单锚定到文本框，以便在滚动时将其重新保存在文本框中？

  {"name":"Custtype","edittype":"custom","maxlength":15,
  "editoptions":  {"custom_element":function(value, options) {
return combobox_element(value, options,'24','Klliik0_nimetus','Klient')}
,"custom_value":function(elem, operation, value) {
      return $("input", $(elem)[0]).val();
}
}
 }

function combobox_element(value, options, width) {
 var elemStr = '<div><input style="width:' + width + 'px" value="' +
 value + '"/>' +
'<button type="button"  style="height:16px;vertical-align:center" class="ui-icon-triange-1-s" style="margin-left:-1px" tabindex=-1/></div>';

var newel = $(elemStr)[0];
var input = $("input", newel);

input.autocomplete({
    source: 'AutoComplete',
    position: { collision: 'flip flip' }
   } 
)
.autocomplete('widget').css('font-size', '12px');
return newel;
}

index.aspx包含来自Fixed positioned search box with Autocomplete suggestions的样式 但如果jqgrid垂直滚动，则下拉菜单不会随文本框移动。

<style>
    .ui-autocomplete
    {
        max-height: 300px;
        overflow-y: auto; /* prevent horizontal scrollbar */
        overflow-x: hidden; /* add padding to account for vertical scrollbar */
        padding-right: 20px;

        z-index: 99999;
        position: fixed;
        top: 0px;
        margin: 20px 0px 0px 0px; /* The top margin defines the offset of textbox */
    }

    /* IE 6 doesn't support max-height
 * we use height instead, but this forces the menu to always be this tall
 */
    * html .ui-autocomplete
    {
        height: 100px;
    }