<html> <head> <title>Auto Search</title> <meta http-equiv="content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" language="javascript">var highIndex=-1;//高亮索引 var timeoutId;//超时标志 /** *处理键盘弹起事件 */ function KeyUp(e) { var e = e; var keyCode = Key(e); var length = document.getElementsByTagName('li').length; if(keyCode == 38){ if(highIndex<=0){ highIndex=length-1; }else{ highIndex=highIndex-1; } }else if(keyCode == 40){ if(highIndex >= length-1){ highIndex = 0; }else{ highIndex=highIndex+1; } } if((keyCode>=48 && keyCode<=57) || (keyCode>=65 && keyCode<=90) || (keyCode>=96 && keyCode<=105) || keyCode == 8){ clearTimeout(timeoutId); timeId=setTimeout(AjaxPost,200); }else if(keyCode == 38 || keyCode== 40 ){ KeyUpAndDown(highIndex); }else if(keyCode == 13){ KeyEnter(highIndex); } } /** *初始化弹出框口 */ function Init() { document.getElementById('msg').style.display = 'block'; document.getElementById('msg').style.position = 'absolute'; document.getElementById('msg').style.left = '10px'; document.getElementById('msg').style.top = '30px'; document.getElementById('msg').style.listStyleType = 'none'; document.getElementById('msg').style.backgroundColor = 'white'; document.getElementById('msg').style.width = document.getElementById('input').style.width; } /** *处理ajax请求 */ function AjaxPost() { var input = document.getElementById('input').value; var url = 'data.php'; var poststr = "in="+input; //实例化ajax var ajax = false; if(window.XMLHttpRequest) { //Mozilla 浏览器 ajax = new XMLHttpRequest(); if (ajax.overrideMimeType) {//设置MiME类别 ajax.overrideMimeType("text/xml"); } } else if (window.ActiveXObject) { // IE浏览器 try { ajax = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { ajax = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!ajax) { // 异常，创建对象实例失败 window.alert("不能创建XMLHttpRequest对象实例."); return false; } ajax.open('POST',url,true); ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); ajax.send(poststr); ajax.onreadystatechange = function(){ if (ajax.readyState == 4 && ajax.status == 200) { msg.innerHTML = ajax.responseText; if(ajax.responseText != ""){ Init(); }else{ Display(); } } }; } /** *处理上下键 */ function KeyUpAndDown(highIndex) { ChangeColor(highIndex); } /** *处理回车键 */ function KeyEnter(highIndex) { var li = document.getElementsByTagName('li'); document.getElementById('input').value = li[highIndex].innerHTML; Display(); } /** *处理鼠标滑过 */ function MouseOver() { var theEvent = window.event || arguments.callee.caller.arguments[0]; var srcElement = theEvent.srcElement; if (!srcElement) { srcElement = theEvent.target; } if(srcElement.tagName == 'LI'){ var li = document.getElementsByTagName('li'); for(i=0;i<li.length;i++){ if(li[i].innerHTML == srcElement.innerHTML){ ChangeColor(i); } } } } /** *处理鼠标移出 */ function MouseOut() { ChangeColor(-2); } /** *处理鼠标单击 */ function Click() { var theEvent = window.event || arguments.callee.caller.arguments[0]; var srcElement = theEvent.srcElement; if (!srcElement) { srcElement = theEvent.target; } if(srcElement.tagName == "LI"){ document.getElementById('input').value = srcElement.innerHTML; Display(); } } /** *DIV区域的隐藏 */ function Display() { document.getElementById('msg').style.display = 'none'; } /** *选中高亮 */ function ChangeColor(highIndex) { var li = document.getElementsByTagName('li'); if(highIndex != -1 && li.length != 0){ for(i=0;i<li.length;i++){ if(li[i].style.backgroundColor == 'red'){ li[i].style.backgroundColor = 'white'; } } li[highIndex].style.backgroundColor='red'; } } /** *IE,FF兼容性 */ function Key(e) { var e = e||event; var keyCode = e.keyCode||e.which ; return keyCode; }</script> </head> <body> <div id='all' onclick="Display()" style="position:absolute;left:0px;top:0px;height:100%;width:100%"> <input type='text' value='' id='input' onkeyup='KeyUp(event)' style="position:absolute;left:10px;top:10px;height:20px;width:230px"> <div id='msg' style='border-left:inset;border-right:outset;border-bottom:outset;border-width:1px;display:none' onclick="Click()" onmouseover="MouseOver()" onmouseout="MouseOut()"> </div> </div> </body> </html>