jQueryUI自动完成在模态框后面隐藏了。

Question

jQueryUI自动完成在模态框后面隐藏了。

5

这里有一个图片，展示了模态框的位置以及为什么它没有出现。我该如何修复？

楼主：

我使用的是与这个基本相同的jQuery UI模态框。当我打开我的页面并单击以打开注册模态框时，我会看到应该自动完成的文本框。当我输入匹配字符串的一部分时，没有任何内容显示。但是，如果我按键盘上的向上或向下箭头，它将滚动匹配项。这让我相信它被隐藏在模态框后面。

相关的模态框如下：

<div class="remodal" data-remodal-id="modal2">
      <div class="logot">
        <div class="favicon"><img src="{% static 'img/favicon.png' %}" /></div>
        <h1>Complete the form to build your profile</h1>
        <div class="logot-iner">
          <form>
          <p>
            My name is &nbsp;&nbsp;
            <input id="firstname" type="text" placeholder="first name" />
            &nbsp;&nbsp;
            <input id="lastname" type="text" placeholder="last name" />
            and I am a  &nbsp;&nbsp;<span class="type">
            <select id="studenttype">
              <option>Full Time</option>
              <option>Part Time</option>
            </select>
            </span> &nbsp;&nbsp; student
            <br />
            <br />
            I am completing a  &nbsp;&nbsp; <span class="type">
            <select id="degreetype">
              <option>Bachelors</option>
              <option>Masters</option>
              <option>Postgraduate</option>
            </select>
            </span> &nbsp;&nbsp; degree at<br />
            <span class="type1">
            <input id="university" type="text" placeholder="uni/college" />
            </span>
            <br />
            <br />
            I study/studied &nbsp;&nbsp; <span class="type2">
            <input id="degree" type="text" placeholder="degree subject" />
            </span> &nbsp;&nbsp;and I
            am currently in my &nbsp;&nbsp;<span class="type">
            <select id="year">
              <option>First</option>
              <option>Second</option>
              <option>Third</option>
              <option>Fourth or higher</option>
            </select>
            </span> &nbsp;&nbsp; year.
            <br />
            <br />
            DOB: &nbsp;&nbsp; <span class="type3"><input id="dobday" type="text" placeholder="DD" /></span>&nbsp;&nbsp;
             <span class="type3"><input id="dobmonth" type="text" placeholder="MM" /></span> &nbsp;&nbsp;
              <span class="type3"><input id="dobyear" type="text" placeholder="YYYY" /></span> &nbsp;&nbsp;
            <br />
            <br />
            My primary skill area is &nbsp;&nbsp; <span class="type">
            <input id="skill" type="text" placeholder="skill area" />.
            </span> &nbsp;&nbsp;<br />
            <br />
            <br />
              My email is <span class="type">
            <input id="email" type="text" placeholder="email" /> and my password is <span class="type">
            <input id="password" type="password" placeholder="password" /></span></span></p>
            <a href="" id="regpost">Register</a>
          </p>
          </form>
        </div>
      </div>

但相关的部分是

<input id="university" type="text" placeholder="uni/college" />

随附的JS是

var fakedata = ['harvard','yale','test3','test4','uni'];
/* PICK UNI AUTOCOMPLETE */
$('input#university').autocomplete({
    source: fakedata
});

我猜需要在某个元素上设置z-index，但我不知道要设置它的元素名是什么。有任何想法吗？

- Nanor

5个回答

3

.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-menu .ui-menu-item a {
  font-size: 12px;
}
.ui-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1051 !important;
  float: left;
  display: none;
  min-width: 160px;
  _width: 160px;
  padding: 4px 0;
  margin: 2px 0 0 0;
  list-style: none;
  background-color: #ffffff;
  border-color: #ccc;
  border-color: rgba(0, 0, 0, 0.2);
  border-style: solid;
  border-width: 1px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
}
.ui-menu-item > a.ui-corner-all {
    display: block;
    padding: 3px 15px;
    clear: both;
    font-weight: normal;
    line-height: 18px;
    color: #555555;
    white-space: nowrap;
    text-decoration: none;
}
.ui-state-hover, .ui-state-active {
      color: #ffffff;
      text-decoration: none;
      background-color: #0088cc;
      border-radius: 0px;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      background-image: none;
}
#modalIns{
    width: 500px;
}

Please check Updated Fiddle

- Punit Gajjar

2

你可以通过在模态窗口中添加类ui-front来轻松解决此问题。

或者执行以下操作： $( ".addresspicker" ).autocomplete( "option", "appendTo", ".eventInsForm" ); 请参阅此处的文档。 https://api.jqueryui.com/autocomplete/#option-appendTo

- Mr U.

1

谢谢！将ui-front添加到我的模态div中解决了问题。 - Ethilium

同意这是正确答案。@Nanor 应该接受它。 - Azuvector

2

只需添加以下CSS代码即可：

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

- ChrisFox

0

检查我的代码...

这是我的HTML代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags,
      minLength: 1
    });

//    $("#tags").autocomplete({
//    source: "search.php",
//    minLength: 1,//search after two characters
//    select: function(event,ui){
//            $("#tags").val(ui.item.country_id);
//            //return false;
//            //console.log(ui);
//            alert(ui.item.country_id);
//        }
//    });

  });
  </script>
</head>
<body>

<div class="ui-widget">
  <input id="tags">
</div>

</body>
</html>

如果您已经看到我在数组中存储了静态值，如果您想使数据动态化，可以使用以下代码

$("#tags").autocomplete({
    source: "search.php",
    minLength: 1,//search after two characters
    select: function(event,ui){
            $("#tags").val(ui.item.country_id);
            //return false;
            //console.log(ui);
            alert(ui.item.country_id);
        }
    });

这是我的search.php代码。

//connect to your database
$link_identifier = mysql_connect("localhost","root","");
mysql_select_db("spade", $link_identifier);

$term = trim(strip_tags($_GET['term']));//retrieve the search term that autocomplete sends

$qstring = "SELECT country_name as value ,country_id FROM countries WHERE country_name LIKE '%".$term."%'";
$result = mysql_query($qstring);//query the database for entries containing the term
$row_set = array();
while ($row = mysql_fetch_array($result,MYSQL_ASSOC))//loop through the retrieved values
{
        $row['value']=htmlentities(stripslashes($row['value']));

        $row['country_id']=(int)$row['country_id'];
        $row_set[] = $row;//build an array
}
echo json_encode($row_set);//format the array into json data

如果你有任何地方不明白，请告诉我。

- Punit Gajjar

做一件事。只需将我的HTML复制到一个单独的PHP文件中并尝试执行它。 - Punit Gajjar

你真的明白我的问题是什么吗？ - Nanor

这个下拉菜单显示在一个模态窗口上。每当它从源获取数据时，它可以完美地完成，但是该 div 不会出现在模态窗口的上方，而是出现在其后面。 - Nanor

好的，那可能是z-index问题，就像其他开发者给你的答案一样。如果它已经上线了，你能给我提供一个链接吗？ - Punit Gajjar

你的问题可以通过https://dev59.com/G5Pea4cB1Zd3GeqP_iu5#34875320解决。只需将此CSS复制并粘贴到页面末尾，无需进行任何更改。 - Munna Bhakta

显示剩余4条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Munna Bhakta · Accepted Answer

只需将 z-index 增加如下所示即可。这样就可以正常工作了。

.ui-front {
    z-index: 9999999 !important;
}