我用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>
本文地址:
转载随意,但请附上文章地址:-)