您现在的位置： 365建站网 > 365文章 > 用ajax 仿百度谷歌搜索的下拉提示

用ajax 仿百度谷歌搜索的下拉提示

文章来源：365jz.com 点击数：1465 更新时间：2009-10-14 10:51 参与评论

在用到实例中时 : 可把关键字定时从数据库中取出来生成到一个XML文件中, 这样能提高效率, 也便于AJAX取得数据.
这里只是提供一个思路和一个小小的实现 .

ajax09.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> .suggestions { background-color: #FFF; padding: 2px 6px; border: 1px solid #000; width : 60px ; } .suggestions:hover { background-color: #69F; } #searchField.error { background-color: #FFC; } </style> <style type="text/css" mce_bogus="1"> .suggestions { background-color: #FFF; padding: 2px 6px; border: 1px solid #000; width : 60px ; } .suggestions:hover { background-color: #69F; } #searchField.error { background-color: #FFC; }</style> <script type="text/javascript"> var xhr = false ; var statesArray = new Array() ; window.onload = initAll ; function initAll() { //alert(document.getElementById("popups").innerHTML) ; //document.getElementById("popups").onmouseover = test ; setArray() ; initArray() ; document.getElementById("searchField").onkeyup = searchSuggest ; document.getElementById("searchField").onblur = hideDiv ; } function test(evt){ var thisDiv = evt ? evt.target : window.event.srcElement ; thisDiv.innerHTML = "haha" ; document.getElementById("popups").appendChild(thisDiv) ; } function initArray(){ statesArray[0] = "china" ; statesArray[1] = "jappan" ; statesArray[2] = "USA" ; statesArray[3] = "UK" ; statesArray[4] = "chinabbc" ; statesArray[5] = "UKYSB" ; statesArray[6] = "UKL" ; statesArray[7] = "chincbin" ; } function searchSuggest() { var str = document.getElementById("searchField").value ; //alert(str) ; if(str != ""){ document.getElementById("popups").innerHTML = "" ; for(var i=0; i<statesArray.length; i++){ var state = statesArray[i] ; if(state.toLowerCase().indexOf(str.toLowerCase()) == 0){ var tempDiv = document.createElement("div") ; tempDiv.innerHTML = state ; tempDiv.className = "suggestions" ; tempDiv.onclick = makeChoice ; document.getElementById("popups").appendChild(tempDiv) ; } } } var resultcount = document.getElementById("popups").childNodes.length ; //alert(resultcount) ; if(resultcount == 0){ //alert(resultcount) ; document.getElementById("searchField").className = "error" ; } if(resultcount == 1){ //alert(resultcount) ; document.getElementById("searchField").value = document.getElementById("popups").childNodes[0].innerHTML ; document.getElementById("popups").innerHTML = "" ; } } function makeChoice(evt){ //alert("makeChoice !") ; var thisDiv = evt ? evt.target : window.event.srcElement ; //alert(thisDiv.innerHTML) ; document.getElementById("searchField").value = thisDiv.innerHTML ; document.getElementById("popups").innerHTML = "" ; } function setArray(){ if(window.XMLHttpRequest){ xhr = new XMLHttpRequest() ; }else{ if(window.ActiveXObject){ try{ xhr = new ActiveXObject("Microsoft.XMLHttpRequest") ; }catch(e){} } } if(xhr){ xhr.onreadystatechange = showContents ; xhr.open("GET", "ajax09.xml", true) ; xhr.send(null) ; }else{ document.getElementById("preWin").innerHTML = "sorry ! but your pc coundn't create a xhr object !" ; } } function showContents(){ if(xhr.readyState == 4){ if(xhr.status == 200){ var msg = xhr.responseXML.getElementsByTagName("item") ; }else{ var msg = "error status = " + xhr.status ; } for(var i=0; i<msg.length; i++){ //alert(msg[i].childNodes[0].nodeValue) ; statesArray[i] = msg[i].childNodes[0].nodeValue ; } } } <script> </head> <body> <center> please input some worlds : <br /> <input type="text" name="searchField" value="" size="60px" /><br /> <div id="popups">ddd</div> <input type="submit" value="submit" /><br /><br /> </center> </body> </html>

ajax09.xml

<?xml version="1.0" encoding="UTF-8"?> <states> <item>china</item> <item>jappan</item> <item>USA</item> <item>UK</item> <item>chinabbc</item> <item>UKYSB</item> <item>UKL</item> <item>chincbin</item> </states>