I used the ajax+php to make a simple search similar to Google searches, and when I didn't enter the alphabet, it showed, 1.jpg:
When I type the letter, it shows the effect of 2.jpg.
I would like to ask everyone, when I click Elsewhere, so that the pop-up search box automatically closed, how to modify the code as follows
<body>
<style type= "Text/css" >
#livesearch
{
margin:0px;
width:140px;
}
#txt1
{
margin:0px;
}
</style>
<script type= "Text/javascript" >
var xmlHttp
function Showresult (str)
{
if (str.length==0)
{
document.getElementById ("LiveSearch").
Innerhtml= "";
document.getElementById ("LiveSearch").
style.border= "0px";
Return
}
Xmlhttp=getxmlhttpobject ()
if (xmlhttp==null)
{
Alert ("Browser does not support HTTP Request")
Return
}
var url= "suggest_list.php"
url=url+ "q=" +str
url=url+ "&sid=" +math.random ()
Xmlhttp.onreadystatechange=statechanged
Xmlhttp.open ("Get", url,true)
Xmlhttp.send (NULL)
}
function statechanged ()
{
if (xmlhttp.readystate==4 | | xmlhttp.readystate== "complete")
{
document.getElementById ("LiveSearch").
Innerhtml=xmlhttp.responsetext;
document.getElementById ("LiveSearch").
Style.border= "1px solid #999999";
}
}
function Getxmlhttpobject ()
{
var xmlhttp=null;
Try
{
Firefox, Opera 8.0+, Safari
Xmlhttp=new XMLHttpRequest ();
}
catch (E)
{
Internet Explorer
Try
{
Xmlhttp=new ActiveXObject ("msxml2.xmlhttp");
}
catch (E)
{
Xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
</script>
<form>
<table align= "center" style= "margin-top:140px" >
<TR>
<TD>
<input type= "text" id= "txt1" size= "" name= "username" >
<div id= "LiveSearch" ></div>
Wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
</TD>
</tr>
</TABLE>
</form>
</body>
