在文件中：styles.css

Question

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

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

有没有办法解决这个问题？

.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

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

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

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

此处is a working JsFiddle!。

Answer 2

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

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

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

Answer 3

Check out the appendTo documentation：

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

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

Answer 4

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

Answer 5

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

您只需在添加的css个文件中添加此内容：

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

Answer 6

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

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

注意：在jquery-ui.css＆amp;之后添加这个css。的jquery-ui.js

Answer 7

尝试添加此内容：

＆＃13;

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

＆＃13;

请确保您为该物业提供高价值并 DO ADD

！重要

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

Answer 8

添加<?php $opts = array( 'ssl' => array('ciphers'=>'RC4-SHA', 'verify_peer'=>false, 'verify_peer_name'=>false) ); $params = array ( 'encoding' => 'UTF-8', 'verifypeer' => false, 'verifyhost' => false, 'soap_version' => SOAP_1_2, 'trace' => 1, 'exceptions' => 1, "connection_timeout" => 180, 'stream_context' => stream_context_create($opts) ); //disable wsdl cache ini_set("soap.wsdl_cache_enabled", "0"); $client = new SoapClient("http://example.com?WSDL",$params); $result = $client->getSiteInfo(); $zone = $result->Sites; $output = ''; if(isset($_POST['search'])){ $searchq = $_POST['search']; $searchq = preg_replace("#[^0-9a-z]#i","",$searchq); $zone = $result->Sites; if($zone == ''){ $output = 'There was no search results!'; } else{ $output .= '<div>' .$zone->techName.''.$zone->managerName.'<div>'; echo $output; }} ?> <form action="champ.search.php" method="post"> <input type="text" name="search" placeholder="Search for Contacts..."> <input id="submit" name="submit" type="submit" value="submit" /> </form>选项解决了此问题。它将菜单附加到引导程序模型中的一个对象。

Answer 9

我解决了这个....

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

自动填充扩展程序完成列表具有这样的utomated ID ID =＆＃39; _completionListElem ＆＃39;

所以你必须向上推z-index .. upper然后是bootstrap模态面板;）

希望有所帮助

Answer 10

在文件中：styles.css

curl -u "username:passwdwithspecialchar" GET https://....

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

祝你好运

Answer 11

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

Answer 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>

自动完成问题进入bootstrap模式

12 个答案:

在文件中：styles.css