How can I close the suggestion box when the user click the Clear button?
When the suggestion box is closed, how can the Search & Clear button move up to its original place?
What code should I insert to do this?
This is my current code:
Thanks
When the suggestion box is closed, how can the Search & Clear button move up to its original place?
What code should I insert to do this?
This is my current code:
Code:
<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>