自动完成问题进入bootstrap模式

Question

我在模式对话框引导程序中的jQuery自动完成中有显示问题.

当我鼠标滚动时,结果不会保持附加到输入.

有办法解决这个问题吗？

在这里JsFiddle:

.ui-autocomplete-input {
  border: none; 
  font-size: 14px;
  width: 300px;
  height: 24px;
  margin-bottom: 5px;
  padding-top: 2px;
  border: 1px solid #DDD !important;
  padding-top: 0px !important;
  z-index: 1511;
  position: relative;
}

编辑 我发现了问题:

.ui-autocomplete {
  position: fixed;
  .....
}

如果模态滚动,问题仍然存在!

这里是JsFiddle/1.

Answer 1

位置是正确的,它是"绝对的",而您需要将其指定为自动完成的选项:

$( ".addresspicker" ).autocomplete( "option", "appendTo", ".eventInsForm" );

它可以将结果框中的任何元素锚定在哪里,我必须阻止它被锚定到表单的类!

这是一个有效的JsFiddle!.

Answer 2

上述解决z-index问题的解决方案有效:

.ui-autocomplete { z-index:2147483647; }

确保将其放在.js负责处理模态和自动完成逻辑的脚本之前.

Answer 3

查看appendTo文档:

当值为null时,将检查输入字段的父级是否为ui-front类.如果找到具有ui-front类的元素,则菜单将附加到该元素.

因此,只需将类"ui-front"添加到父元素,自动完成就会在模态中正确显示.

Answer 4

将类"ui-front"添加到div父元素,自动完成将在PopUp For Me中正确显示.

Answer 5

实际问题是Bootstrap Modal具有比页面中任何其他元素更高的Z-index.因此,自动完成实际上有效 - 但它隐藏在对话框后面.

您只需要在任何添加的css文件中添加它:

.ui-autocomplete {
  z-index:2147483647;
}

Answer 6

为了解决这个问题，我只需要css通过 jQuery在文件中进行更改：

.ui-front {
    z-index: 9999;
}

注意：在 jquery-ui.css & jquery-ui.js 之后添加这个 css