Home >php教程 >php手册 >ajax+php做的search,显示和关闭的问题?

ajax+php做的search,显示和关闭的问题?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-22 18:35:58822browse

我用ajax+php作了个简易的类似于google search的搜索,当我没输入字母的时候,显示是这样的,1.jpg:

当我输入字母时显示是,2.jpg的效果。

请问大家,当我鼠标点击别处时,使弹出的search的那个框自动关闭,应如何修改,代码如下

<html>
<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="26"  name="username">
<div id="livesearch"></div>
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
</TD>
</tr>
</TABLE>
</form>
</body>
</html>


本文地址:

转载随意,但请附上文章地址:-)

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:PHP读入EXCEL的 Next article:用PHP写FTP文件上传