jqGrid自动完成功能显示在添加/编辑表单后面

时间:2013-06-24 11:28:02

标签: jqgrid jquery-ui-autocomplete

我在jqGrid中使用jQuery UI Autocomplete,但自动完成列表显示在添加/编辑表单后面。我正在使用最新的jQuery UI和jqGrid。以下是代码段:

colModel : [
  {
    name: "birthPlaceId",
    index: "birthPlaceId",
    editable: true,
    edittype: "text",
    hidden: true
  }, {
    name: "birthPlaceName",
    index: "birthPlaceName",
    editable: true,
    editoptions: {
      size: 75,
      dataInit: function (e) {
        $(e).autocomplete({
          source: "${ajaxPlacesUrl}",
          minLength: 1,
          focus: function (event, ui) {
            $(e).val(ui.item.label);
          },
          select: function (event, ui) {
            $(e).val(ui.item.label);
            $("input#birthPlaceId").val(ui.item.value);
          }
        });
      }
    },
    editrules: {
      edithidden: true,
      required: false
    },
    edittype: "text",
    hidden: true,
    width: 75
  }
]

以下是从服务器获取的“W”

的JSON数据
[{"value":30,"label":"Washington, DC, USA"},
 {"value":31,"label":"Windsor, Ontario, Canada"},
 {"value":111,"label":"Wylie, Texas, USA"}]

我搜索过,无法找到解决方法。感谢任何帮助。感谢。

1 个答案:

答案 0 :(得分:1)

在“添加/编辑”表单后面显示jQuery UI自动完成菜单的问题通常可以通过两种方式解决。第一种方法是使用jQuery UI Autocomplete的appendTo选项。选项范围更改页面上自动完成菜单的位置。另一种方法是更改​​添加/编辑表单的z-index。您可以使用zIndex属性将默认950值减少到较小的值。有关代码示例,请参阅the answer