jqGrid Autocomplete is displaying behind the add / edit form

Question

I am using jQuery UI Autocomplete in jqGrid, but the autocomplete list is displayed behind the add / edit form. I am using the latest jQuery UI and jqGrid. Here is the code snippet:

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
  }
]

Here is the JSON data getting from the server for "W":

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

I searched and couldn't find a fix for this. Appreciate any help. Thanks.

score 1 · Accepted Answer · edited May 23 '17 at 11:50

1

The problems with displaying of jQuery UI Autocomplete menu behind the Add/Edit form can be solved typically in one from two ways. The first way will be the usage of appendTo option of jQuery UI Autocomplete. The option van change place of Autocomplete menu on the page. Another way will be to change z-index of Add/Edit form. You can use zIndex property to reduce the default 950 value to some less value. See the answer for the code example.

edited May 23 '17 at 11:50

Community

1
1

answered Jun 24 '13 at 11:40

Oleg

220,925
34
403
798

Oleg, thanks for your fast response. I added {zIndex:1234} to add and edit forms, autocomplete is still displaying behind the add / edit forms. I also tried appendTo option of Autocomplete and it did not bring the autocomplete at all. Any other suggestions? – mj8591 Jun 24 '13 at 13:20
@mj8591: You should **reduce** the value of `z-index`. The default value is `950`. If you increase it to `1234` the Add/Edit form will stay over the autocomplete menu. – Oleg Jun 24 '13 at 14:26
I changed {zIndex:99} and added it works fine now. Thanks for your help. – mj8591 Jun 24 '13 at 16:12

jqGrid Autocomplete is displaying behind the add / edit form

1 Answers1