引导模式中的自动完成问题

Posted 2023-05-08

【中文标题】引导模式中的自动完成问题

【英文标题】：Autocomplete issue into bootstrap modal

【发布时间】：2013-04-14 13:27:23

【问题描述】：

我在模态对话框引导程序内的 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。

【参考方案1】：

位置是正确的，它是“绝对”，而您需要将其指定为autocomplete的选项：

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

如果它可以将带有结果的框锚定在任何元素中，我必须阻止它被锚定到表单的类！

这里is a working JsFiddle!。

【讨论】：

谢谢。如果有人遇到我同样的问题，它也适用于 jquery autocomplete combobox。只需在_createAutocomplete 函数中将appendTo: ".your-form-in-modal" 添加到.autocomplete( 即可。

感谢您的解决方案。但是，如果您删除 textarea，我们确实会在 modal-body 中看到一个滚动条。知道如何解决这个问题吗？这是一个工作小提琴：jsfiddle.net/TtxqG/410

或者简单地将.ui-front添加到模态窗口

teran : 这是最快的答案，谢谢！更准确地说，将.ui-front 添加到您的.modal-body div。

如果提示 appendTo 选项不能解决你的问题，你可以做appendTo: $(id or class).parent()

【参考方案2】：

上述关于z-index 问题的解决方案有效：

.ui-autocomplete  z-index:2147483647; 

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

【讨论】：

如果你看了另一个答案的cmets，和你的一模一样，问题不是这样解决的！

为我工作。不管反对者是谁。

完美。没有 JS。使用 CSS，这是最好的解决方案。

您的解决方案也适合我。谢谢

工作就像一个魅力！

【参考方案3】：

Check out the appendTo documentation：

当值为空时，输入字段的父级将是 检查了一类 ui-front。如果具有 ui-front 类的元素 找到后，菜单将附加到该元素。

所以只需将“ui-front”类添加到父元素，自动完成将正确显示在模态框内。

【讨论】：

与 Foundation 5 显示模式配合得很好。

对我不起作用。到目前为止，唯一有效的方法是破解z-index，这感觉不对。

这应该是答案

【参考方案4】：

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

【讨论】：

虽然接受的答案会起作用，但我觉得这应该是正确的答案，因为文档表明这是默认行为：If an element with the ui-front class is found, the menu will be appended to that element

您在 2 年后重复一个已经回答的问题。查看@Fernando Pinheiro 的原始答案

【参考方案5】：

实际问题是引导模式的 Z-index 比页面中的任何其他元素都高。因此，自动完成确实有效 - 但它隐藏在对话框后面。

您只需将其添加到您添加的任何css 文件中：

.ui-autocomplete 
  z-index:2147483647;

【讨论】：

问题不仅如此，而且将参数 z-index 设置得这么高并不能解决任何问题！问题不仅在于它仍然位于模式下方，而且如果您让它滚动页面，结果不会保持与输入的关联，如果您重新阅读问题，将会得到解释。不过问题解决了，看上面的回答！

【参考方案6】：

要解决这个问题，我只需要通过 jQuery 更改 css 文件：

.ui-front 
    z-index: 9999;

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

【参考方案7】：

试试添加这个：

.ui-autocomplete 
  z-index: 215000000 !important;

只要确保您给予该物业较高的价值并添加

!重要

这真的很重要。后者将告诉您的浏览器首先执行此规则，然后再执行同一类的任何其他规则。 希望对你有帮助

【讨论】：

这不是响应式设计

我不明白你@gtzinos

【参考方案8】：

在文件中：styles.css

.cdk-overlay-container

    z-index: 9999 !important;

我在组件的内部 css 文件中尝试了所有解决方案，但没有任何效果，只有将其移至 styles.css。

祝你好运

【参考方案9】：

添加appendTo 选项解决了这个问题。它将菜单附加到引导模型中的对象之一。

【参考方案10】：

我解决了这个....

/********************************************************************
*           CORREZIONE PER L'AUTOCOMPLETE EXTENDER di AJAX TOOLKIt  *
********************************************************************/
ul[id*='_completionListElem'] 
    z-index: 215000000 !important;

自动完成扩展器完成列表有一个像这样的自动化 ID id='_completionListElem'

所以你必须向上推 z-index .. 高于引导模式面板；）

希望对你有帮助

【参考方案11】：

<style>
.ui-front 
    z-index: 5000;
    position: relative;

</style>

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助，质量更高，更有可能吸引投票。

【参考方案12】：

.ui-front 
    z-index: 9999;


<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog ui-front">
        <div class="modal-content">
            <div class="modal-header">

            </div>
            <div class="modal-body">

            </div>
        </div>
    </div>
</div>