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

jQueryUI autocomplete hidden behind modal

本文关键字：模态 隐藏 jQueryUI      更新时间：2023-09-26

这是模态在哪里以及它如何不出现的图像。我该如何解决？

OP

我正在使用与此基本相同的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 索引，但我不知道设置它的名称。有什么想法吗？

只需增加 z 索引，如下所示。 这将正常工作。

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

.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;
}

请检查更新的小提琴

只需添加以下 CSS：

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

您可以通过将类ui-front添加到模式窗口来轻松解决此问题。

或者这样做：

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

请参阅此处的文档。https://api.jqueryui.com/autocomplete/#option-appendTo

检查我的代码。

这是我的网页 

<!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);
        }
    });

这是我的搜索.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

如果您在任何地方都不明白，请告诉我。

相关文章：