Nan*_*nor 1 javascript jquery jquery-ui
这是模态在哪里以及如何不出现的图像。我如何解决它？
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
<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，但是我不知道要在其上设置什么名称。有任何想法吗？
只需如下增加z-index即可。这将正常工作。
.ui-front {
z-index: 9999999 !important;
}
检查我的代码。。
这是我的 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
如果您有任何地方不明白，请告诉我。
| 归档时间： |
|
| 查看次数： |
2256 次 |
| 最近记录： |