当用户点击“清除”按钮时,如何关闭提示框?
当建议框关闭时,搜索&清除按钮移动到原来的位置?
我应该插入什么代码才能执行此操作?
运行此代码时可以看到按钮。
这是我目前的代码:
<html>
<head>
<title>
Brandon's Search Engine
</title>
<style type="text/css">
#suggestion {
border: 1px solid black;
visibility: hidden;
position: relative;
background-color: white;
z-index: 10;
}
#suggestion a {
font-size: 12pt;
color: black;
text-decoration: none;
display: block;
width: 648px;
height: auto;
text-align: left;
padding: 2px;
}
#suggestion a:hover {
background-color: #dddddd;
width: 644px;
padding: 2px;
}
</style>
<script type="text/javascript">
//document.getElementById("suggestion")
function getSuggestion(q) {
var ajax;
if(window.XMLHttpRequest)//for ie7+, FF, Chrome
ajax = new XMLHttpRequest();//ajax object
else
ajax = new ActiveXObject("Microsoft.XMLHTTP");//for ie6 and previous
ajax.onreadystatechange = function() {
if(ajax.status === 200 && ajax.readyState === 4) {
//if result are not there then don't display them
if(ajax.responseText === "")
document.getElementById("suggestion").style.visibility = "hidden";
else {
document.getElementById("suggestion").style.visibility = "visible";
document.getElementById("suggestion").innerHTML = ajax.responseText;
}
}
};
ajax.open("GET", "suggestion.php?q=" + q, false);
ajax.send();
}
</script>
<script>
function validateForm()
{
var x=document.forms["q"]["q"].value;
if (x==null || x=="")
{
return false;
}
}
</script>
</head>
<body>
<form method="GET" action="search.php" name="q" onsubmit="return validateForm()">
<table align="center">
<tr>
<td>
<h1><center>Brandon's Search Engine</center></h1>
</td>
</tr>
<tr>
<td align="center">
<input type="text" name="q" style="height: 27px; width: 650px; padding: 2px"
onkeyup="getSuggestion(this.value)" autocomplete="off" onblur="blur() document.getElementById('suggestion').style.visibility = 'hidden'"/>
<div id="suggestion" style="width: 648px">
</div>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" name="submit" value="Search" style="height: auto; width: 60px; padding: 2px" />
<input type="reset" value="Clear" style="height: auto; width: 50px; padding: 2px" />
</td>
</tr>
<tr>
<td align="center">
To insert your site in result fill in the form at <a href="insert.php">here</a>.
</td>
</tr>
</table>
<input type="hidden" name="page" value="0" />
</form>
</body>
</html>
希望有人可以帮助我解决这个问题
由于
答案 0 :(得分:0)
<html>
<head>
<title>
Brandon's Search Engine
</title>
<style type="text/css">
#suggestion {
border: 1px solid black;
visibility: hidden;
position: relative;
background-color: white;
z-index: 10;
}
#suggestion a {
font-size: 12pt;
color: black;
text-decoration: none;
display: block;
width: 648px;
height: auto;
text-align: left;
padding: 2px;
}
#suggestion a:hover {
background-color: #dddddd;
width: 644px;
padding: 2px;
}
</style>
<script type="text/javascript">
//document.getElementById("suggestion")
function getSuggestion(q) {
var ajax;
if(window.XMLHttpRequest)//for ie7+, FF, Chrome
ajax = new XMLHttpRequest();//ajax object
else
ajax = new ActiveXObject("Microsoft.XMLHTTP");//for ie6 and previous
ajax.onreadystatechange = function() {
if(ajax.status === 200 && ajax.readyState === 4) {
//if result are not there then don't display them
if(ajax.responseText === "")
document.getElementById("suggestion").style.visibility = "hidden";
else {
document.getElementById("suggestion").style.visibility = "visible";
document.getElementById("suggestion").innerHTML = ajax.responseText;
}
}
};
ajax.open("GET", "suggestion.php?q=" + q, false);
ajax.send();
}
</script>
<script>
function closeBox(){
document.getElementById("suggestion").style.visibility = "hidden";
}
function validateForm()
{
var x=document.forms["q"]["q"].value;
if (x==null || x=="")
{
return false;
}
}
</script>
</head>
<body>
<form method="GET" action="search.php" name="q" onsubmit="return validateForm()">
<table align="center">
<tr>
<td>
<h1><center>Brandon's Search Engine</center></h1>
</td>
</tr>
<tr>
<td align="center">
<input type="text" name="q" style="height: 27px; width: 650px; padding: 2px"
onkeyup="getSuggestion(this.value)" autocomplete="off" onblur="blur() document.getElementById('suggestion').style.visibility = 'hidden'"/>
<div id="suggestion" style="width: 648px">
</div>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" name="submit" value="Search" style="height: auto; width: 60px; padding: 2px" />
<input type="reset" onclick="closeBox()" value="Clear" style="height: auto; width: 50px; padding: 2px" />
</td>
</tr>
<tr>
<td align="center">
To insert your site in result fill in the form at <a href="insert.php">here</a>.
</td>
</tr>
</table>
<input type="hidden" name="page" value="0" />
</form>
</body>