autoSearch.js var arrOptions = new Array(); var theTextBox; var currentValueSelected = -1;//表当前选中的某项 //以上设置一些全局变量 window.onload = function(){ var elemSpan = document.createElement("span");//在页面创建span标签 elemSpan.id = "spanOutput"; elemSpan.className = "spanTextDropdown"; document.body.appendChild(elemSpan); document.getElementById("search").onkeyup = test1;//当按键抬起调用此函数 } function test1(){ var intKey = -1; var temp=""; if(window.event){ intKey = event.keyCode; theTextBox = event.srcElement;//获得事件源 } if(theTextBox.value.length == 0){ HideTheBox(); return false; } if(intKey == 13){//按回车键 SetText(); theTextBox.blur(); return false; }else if(intKey == 38){//按向上键 MoveHighlight(-1); return false; }else if(intKey == 40){ //按向下键 MoveHighlight(1); return false; } var radio=document.getElementsByName("vtype"); var vtype; for(var i=0;i<radio.length;i++) { if(radio[i].checked) { vtype=radio[i].value; break; } } //if($("search").value==""||$("search").value==temp)return; abcDwr.findByLike( //dwr技术,后台连接数据库 $("search").value,vtype, function(datas){ arrOptions=datas; Bulid(arrOptions);//建立下拉框 //temp = $("search").value; } ); } function Bulid(arrOptions){ var inner=""; SetElementPosition();//设置下拉框出现的位置 for(var i=0; i < arrOptions.length; i++){ inner+="<span id=arr_"+i+" class='spanNormalElement' οnmοuseοver='SetHighColor(this)' οnclick='SetText()'><font color=#000000>"+arrOptions[i]+"</font></span><br>"; } document.getElementById("spanOutput").innerHTML = inner; if(inner!=""){ document.getElementById("arr_0").className ="spanHighElement";//设置第一个顶为默认选中 currentValueSelected=0; }else {HideTheBox();currentValueSelected=-1;} } function SetElementPosition(){//设置下拉框出现的位置 var selectedPosX = 0; var selectedPosY = 0; var theElement = document.getElementById("search"); var theTextBoxInt = document.getElementById("search"); if (!theElement) return; var theElemHeight = theElement.offsetHeight; var theElemWidth = theElement.offsetWidth; while(theElement != null){ selectedPosX += theElement.offsetLeft; selectedPosY += theElement.offsetTop; theElement = theElement.offsetParent; } xPosElement = document.getElementById("spanOutput"); xPosElement.style.left = selectedPosX; xPosElement.style.width = theElemWidth; xPosElement.style.top = selectedPosY + theElemHeight xPosElement.style.display = "block"; } function MoveHighlight(xDir){//设置上下移动键 var currnum=currentValueSelected+xDir; if(currnum >= 0 && currnum<arrOptions.length ){ document.getElementById("arr_"+currentValueSelected+"").className ="spanNormalElement"; document.getElementById("arr_"+currnum+"").className ="spanHighElement"; currentValueSelected=currnum; }else if(currnum==arrOptions.length){ document.getElementById("arr_"+currentValueSelected+"").className ="spanNormalElement"; currentValueSelected=0; document.getElementById("arr_"+currentValueSelected+"").className ="spanHighElement"; }else if(currnum==-1){ document.getElementById("arr_"+currentValueSelected+"").className ="spanNormalElement"; currentValueSelected=arrOptions.length-1; document.getElementById("arr_"+currentValueSelected+"").className ="spanHighElement"; } } function HideTheBox(){//隐藏下拉框 document.getElementById("spanOutput").style.display = "none"; currentValueSelected = -1; } function SetText(){//选中下拉框中的某个值 theTextBox = document.getElementById("search"); theTextBox.value = arrOptions[currentValueSelected]; document.getElementById("spanOutput").style.display = "none"; $("search").setValue=theTextBox.value; currentValueSelected = -1; } function SetHighColor(theTextBox){//当鼠标划过变为选中状态 if(theTextBox){ currentValueSelected = theTextBox.id.slice(theTextBox.id.indexOf("_")+1, theTextBox.id.length); } for(var i = 0; i < arrOptions.length; i++){ document.getElementById('arr_' + i).className ='spanNormalElement'; } document.getElementById('arr_'+currentValueSelected).className = 'spanHighElement'; } search.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'test.jsp' starting page</title> <!--样式 --> <mce:style><!-- span.spanTextDropdown{ position: absolute; top: 0px; left: 0px; width: 150px; z-index: 101; background-color: #FFFFFF; border: 1px solid #000000; padding-left: 2px; overflow: visible; display: none; } span.spanMatchText{ text-decoration: underline; font-weight: bold; } span.spanNormalElement{ background: #FFFFFF; } span.spanHighElement{ background: #C0C0C0; color: white; cursor: pointer; } --></mce:style><style mce_bogus="1"> span.spanTextDropdown{ position: absolute; top: 0px; left: 0px; width: 150px; z-index: 101; background-color: #FFFFFF; border: 1px solid #000000; padding-left: 2px; overflow: visible; display: none; } span.spanMatchText{ text-decoration: underline; font-weight: bold; } span.spanNormalElement{ background: #FFFFFF; } span.spanHighElement{ background: #C0C0C0; color: white; cursor: pointer; } </style> <!--样式 --> <!-- dwr --> <mce:script type='text/javascript' src='<%=request.getContextPath()%><!-- /dwr/interface/purposeDwr.js'> // --></mce:script> <mce:script type='text/javascript' src='<%=request.getContextPath()%><!-- /dwr/engine.js'> // --></mce:script> <mce:script type='text/javascript' src='<%=request.getContextPath()%><!-- /dwr/util.js'> // --></mce:script> <mce:script type='text/javascript' src='<%=request.getContextPath()%><!-- /js/autoSearch.js'> // --></mce:script> <!-- dwr --> </head> <body> <div align="center"> </div> <div style="position:absolute;left:190px;top:25px;"> <input autocomplete="off" style="width: 300; height: 23;z-index: 10;top:0;left:0;" type="text" name="search" value="" id="search" /> <input type="button" class="btn" value="搜一下"/> </div> </body> </html> 在search中的mce请删除一下才可以用,csdn的安全机制问题,把原先的都换了