|
|
|
|
模拟Google首页(dwr实现ajax)(8)http://www.sina.com.cn 2008年05月23日 09:25 csdn
最后是jsp页面 <%@ page language="java" pageEncoding="UTF-8"%> <!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> <title>模拟搜索引擎</title> <style type="text/css"> html {}{ filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } </style> <script type='text/javascript' src='/ajaxTest/dwr/interface/history.js'></script> <script type='text/javascript' src='/ajaxTest/dwr/engine.js'></script> <script type='text/javascript' src='/ajaxTest/dwr/util.js'></script> <script language="javascript"> /**//*处理用户相关搜索*/ function change(data){ //得到表格中的行数 var count = document.getElementById('tab').rows.length; //如果表中存在行,将所有行删除 if(count >0){ for(var i=count-1; i>=0; i--){ document.getElementById('tab').deleteRow(i); } } //如果存在相关搜索记录 if(data.length > 0){ document.getElementById('Related').style.display = ''; document.getElementById('x').style.display = ''; for(var i=0; i<data.length; i++){ var objTr = document.getElementById('tab').insertRow(); var objTd1 = objTr.insertCell(0); objTd1.innerHTML = "<input readonly type='text' " +"size='35' name='txtHistory' style='border:none; background:#FFFFFF'" +" value='"+data[i].content+"' onmouseover='overChangeColor(this)'" +" onmouseleave='leaveChangeColor(this)' " +"onclick='clickHistory(this)'>"; var objTd2 = objTr.insertCell(1); objTd2.innerHTML = "<input type='text' name='result' readonly" +" size='15' style='border:none; background:#FFFFFF; text-align:right'" +" value='"+data[i].count+"结果"+"' align='right'/>"; objTd2.align = 'right'; } }else{ document.getElementById('Related').style.display = 'none'; } } /**//*关闭历史查询记录*/ function myClose(){ document.getElementById('Related').style.display = 'none'; } /**//*鼠标在相关搜索内容上方时执行*/ function overChangeColor(object){ var histories = document.getElementsByName('txtHistory'); for(var i=0; i<histories.length; i++){ //如果当前鼠标停留在某一行上 if(histories[i].style.background == '#ccffcc'){ histories[i].style.background = '#FFFFFF'; var tdObj1 = histories[i].parentElement; //td var trObj1 = tdObj1.parentElement; //tr var childObj1 = trObj1.childNodes(1); var x1 = childObj1.childNodes(0); x1.style.background = '#FFFFFF'; break; } } object.style.background = '#CCFFCC'; var tdObj = object.parentElement; //td var trObj = tdObj.parentElement; //tr var childObj = trObj.childNodes(1); var x = childObj.childNodes(0); x.style.background = '#CCFFCC'; } /**//*鼠标离开相关搜索内容上方时执行*/ function leaveChangeColor(object){ object.style.background = '#FFFFFF'; var tdObj = object.parentElement; //td var trObj = tdObj.parentElement; //tr var childObj = trObj.childNodes(1); //td var x = childObj.childNodes(0); //input x.style.background = '#FFFFFF'; } /**//*鼠标点击相关搜索内容时执行*/ function clickHistory(object){ document.frm.content.value = object.value; document.getElementById('Related').style.display = 'none'; frm.submit(); } /**//*用户在搜索框中按键事件处理*/ function keySelectHistory(){ var nKeyCode = window.event.keyCode; if(nKeyCode == 38 || nKeyCode == 40){ var count = document.getElementById('tab').rows.length; var tempRowId; //记录鼠标悬浮所在行 var flag = false; //标识是否有已经变色的行 if(count > 0 && (nKeyCode == 38 || nKeyCode == 40)){//如果存在相关搜索信息 var histories = document.getElementsByName('txtHistory'); for(var i=0; i<histories.length; i++){ //如果当前鼠标停留在某一行上 if(histories[i].style.background == '#ccffcc'){ tempRowId = i; flag = true; break; } } if(!flag){ tempRowId = 0; } if(nKeyCode == 38){//向上键 if(tempRowId > 0){ leaveChangeColor(histories[tempRowId]); overChangeColor(histories[tempRowId - 1]); document.frm.content.value = (histories[tempRowId - 1]).value; }else{ leaveChangeColor(histories[0]); overChangeColor(histories[count - 1]); document.frm.content.value = (histories[count - 1]).value; } }else if(nKeyCode == 40){//向下键 if(tempRowId == 0 && histories[0].style.background != '#ccffcc'){ overChangeColor(histories[0]); document.frm.content.value = histories[0].value; }else if(tempRowId < count -1){ leaveChangeColor(histories[tempRowId]); overChangeColor(histories[tempRowId + 1]); document.frm.content.value = (histories[tempRowId + 1]).value; }else{ leaveChangeColor(histories[tempRowId]); overChangeColor(histories[0]); document.frm.content.value = histories[0].value; } } } }else{//搜索框内容发生改变时(手动使其变化,而非通过上下键) var str = document.frm.content.value; history.getHistory(str,change); } } </script> </head> <body> <b>模拟搜索引擎</b> <br /> <form action="ServletX" name="frm" method="post"> <img alt="逝者安息,生者坚强" src="images\daonian.gif" /> <br /> <br /> <input type="hidden" name="model" value="search" /> <input type="text" size="55" name="content" onkeyup="keySelectHistory()" /> <input type="submit" value="搜索" /> <div id="Related" style="border:1px solid #f990033; display:'none'; width:335; "> <table id="tab" cellpadding="0" border="0" cellspacing="0"> </table> <a id="x" href='javascript:; ' onclick='myClose()' style="display:none">关闭</a> </div> </form> </body> </html> 尽情享受dwr为我们开发ajax带来的畅爽吧! 来源：人因梦想而伟大 - BlogJava
【发表评论】
不支持Flash
|
|||||||||||||||