一个适合新手的googlesuggest效果资源-CSDN文库

共3个文件

html：1个

aspx：1个

xls：1个

ajax

google

javascript

需积分: 9 152 浏览量 2007-11-05 09:22:38 上传评论收藏 7KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

google.rar （3个子文件）

搜索提示.html 5KB

Book1.xls 22KB

google.aspx 1KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>模拟google搜索提示</title> <STYLE type="text/css"> .div_list{ border:1px solid #336600; width:100px; position:absolute; display:none; background-color:#FFFFFF; color:#009966; } ul{ list-style:none; margin-left:0px; } td{width:100%;} .li_sel{ width:100%; background-color:#99FFCC; cursor:pointer; } body{ margin-left:10px; margin-top:10px; } </STYLE> </head> <body> 请输入姓名  <INPUT type="text" name="txtName" id="txtName" value="" onkeyup="HandleKeyUp(this,document.getElementById('divlist'),event)" onkeydown="HandleKeyDown(document.getElementById('divlist'),event)" autocomplete="off" /> <input type="button" value="提交" onclick="ShowRecord(document.getElementById('txtName').value"/> <DIV class="div_list" id="divlist" selectindex="-1">dd</DIV> <SCRIPT language="javaScript"> var xmlhttp; function SetListPos(oDiv) {//设置列表位置使其在文本况下方 var oInput=document.getElementById("txtName"); if(document.all){ oDiv.style.left=oInput.offsetLeft+10+'px'; oDiv.style.top=oInput.offsetTop+oInput.offsetHeight+10+"px"; oDiv.style.width=oInput.offsetWidth-2+'px'; } else{ oDiv.style.left=oInput.offsetLeft+'px'; oDiv.style.top=oInput.offsetTop+oInput.offsetHeight+"px"; oDiv.style.width=oInput.offsetWidth-2+'px'; } } function FillList(oDiv,strList){ arrList=window.eval(strList); oDiv.selectindex=-1;//设置选中项目为空 if(arrList.length>0){ var strhtml="<table border=0 style='width:100%'>"; for(var i=0;i<arrList.length;i++){ strhtml+="<tr><td onmouseover=\"this.className='li_sel'\" "; strhtml+="onmouseout=\"this.className=''\" "; strhtml+="onclick='Td_click(this,document.getElementById(\"txtName\"),document.getElementById(\"divlist\"))'>" strhtml+=arrList[i].name+"</td></tr>"; } strhtml+="</table>"; oDiv.innerHTML=strhtml; ShowList(document.getElementById('divlist'),'block'); } else{ ShowList(oDiv,'none'); oDiv.innerHTML=""; } } function ShowList(oDiv,strDisplay){ oDiv.style.display=strDisplay; } function CreateXmlHttp(){ if(document.all) return new ActiveXObject("Microsoft.XMLHTTP"); else return new XMLHttpRequest(); } function HandleStateChange(){ if(4==xmlhttp.readyState){ var oDiv=document.getElementById("divlist"); if(200==xmlhttp.status){ var strResponse=xmlhttp.responseText; FillList(oDiv,strResponse); } else{ alert("请求发生错误！"+xmlhttp.responseText) ShowList(oDiv,'[]'); } } } function HandleInputChange(strInput){ if(strInput!=""){ xmlhttp=CreateXmlHttp(); xmlhttp.open("post","google.aspx",true); xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded'); xmlhttp.onreadystatechange=HandleStateChange; xmlhttp.send("word=" + escape(strInput)); } else{ var oDiv=document.getElementById('divlist'); ShowList(oDiv,'none'); oDiv.innerHTML=""; } } function Td_click(oTd,oInput,oDiv){ oInput.value=oTd.innerHTML; ShowList(oDiv,'none'); } function ChangeListSelect(oDiv,strOperation){ var nItemCount=oDiv.getElementsByTagName('tr').length; var nSelIndex=parseInt(oDiv.selectindex); //恢复以前选中的项目 if(nSelIndex!=-1) oDiv.getElementsByTagName('td')[nSelIndex].className=''; //改变选中项目 var i=strOperation=="push"?1:-1; if(nSelIndex+i<-1) oDiv.selectindex=nItemCount-1; if(nSelIndex+i>=-1 && nSelIndex+i<nItemCount) oDiv.selectindex=nSelIndex+i; if(nSelIndex+i>=nItemCount) oDiv.selectindex=-1 //显示现在选中的项目 nSelIndex=parseInt(oDiv.selectindex); if(nSelIndex!=-1) oDiv.getElementsByTagName('td')[nSelIndex].className='li_sel'; } function HandleKeyUp(oInput,oDiv,e){ var evt=window.event||e; var keycode=evt.keyCode||evt.witch; switch(keycode){ case 9://处理tab键（失败，无法触发） oDiv.style.display='none'; break; case 13://处理回车键 var nIndex=oDiv.selectindex; if( nIndex){ oInput.value=oDiv.getElementsByTagName('td')[nIndex].innerHTML; oDiv.style.display='none'; } break; case 38://处理方向键上箭头 ChangeListSelect(oDiv,"pop") ; break; case 40://处理方向键下肩头 ChangeListSelect(oDiv,"push") ; break; default://处理正常的字符输入 HandleInputChange(oInput.value) } } function HandleKeyDown(oDiv,e){ var evt=window.event||e; var keycode=evt.keyCode||evt.witch; if(keycode==9){//处理tab键 oDiv.style.display='none'; } } function ShowRecord(strName){ } SetListPos(document.getElementById('divlist')); </SCRIPT> </body> </html>

评论收藏

内容反馈