Here是模式所在的图像以及它是如何不出现的。我该如何解决？
OP
我使用的jQuery UI模式与this基本相同。当我打开我的页面并点击打开注册模式时，我会收到一个应该自动完成的文本框。当我放入匹配字符串的一部分时，什么都没有出现。但是，如果我按下键盘上的向上或向下箭头，它将滚动浏览匹配。这让我相信它隐藏在模态背后。
有问题的模式如下：
<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
<input id="firstname" type="text" placeholder="first name" />
<input id="lastname" type="text" placeholder="last name" />
and I am a <span class="type">
<select id="studenttype">
<option>Full Time</option>
<option>Part Time</option>
</select>
</span> student
<br />
<br />
I am completing a <span class="type">
<select id="degreetype">
<option>Bachelors</option>
<option>Masters</option>
<option>Postgraduate</option>
</select>
</span> degree at<br />
<span class="type1">
<input id="university" type="text" placeholder="uni/college" />
</span>
<br />
<br />
I study/studied <span class="type2">
<input id="degree" type="text" placeholder="degree subject" />
</span> and I
am currently in my <span class="type">
<select id="year">
<option>First</option>
<option>Second</option>
<option>Third</option>
<option>Fourth or higher</option>
</select>
</span> year.
<br />
<br />
DOB: <span class="type3"><input id="dobday" type="text" placeholder="DD" /></span>
<span class="type3"><input id="dobmonth" type="text" placeholder="MM" /></span>
<span class="type3"><input id="dobyear" type="text" placeholder="YYYY" /></span>
<br />
<br />
My primary skill area is <span class="type">
<input id="skill" type="text" placeholder="skill area" />.
</span> <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，但我不知道要设置它的名称。有什么想法吗？
答案 0 :(得分：5)
只需增加z-index如下所示。这将正常工作。
.ui-front {
z-index: 9999999 !important;
}
答案 1 :(得分：2)
.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;
}
请查看更新的Fiddle
答案 2 :(得分：1)
只需添加以下 CSS：
.ui-autocomplete {
z-index: 9999999 !important;
}
答案 3 :(得分：1)
您可以通过向模态窗口添加类 ui-front 来轻松解决此问题。
或者这样做：
$( ".addresspicker" ).autocomplete( "option", "appendTo", ".eventInsForm" );
在此处查看文档。 https://api.jqueryui.com/autocomplete/#option-appendTo
答案 4 :(得分：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
如果你在任何地方都不懂，请告诉我。