這個前段比較簡單，主要用於捕獲事件，並進行分類處理，可以發送查詢和自動提示的補全功能
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//清空補全表單
function clearFill()
{
var ul=$("showRes");
if(len=ul.childNodes.length)
{
//window.alert(len);
for(var i=len-1; i>=0; i--)
{
ul.removeChild(ul.childNodes[i]);
}
ul.style.display="none";
}
}
//創建XHR
function getXMLHttpRequest()
{
var xmlhttp=null;
if(window.ActiveXObject)
{
xmlhttp = new ActiveXObject("Microsoft.XMLHttp");
}
else
{
xmlhttp=new XMLHttpRequest();
}
return xmlhttp;
}
//發送AJAX查詢
function query(type)
{
var url="/ciba/niujin-alpha/process.php";
//查詢結果
if(type==1)
{
var data="?enword="+$('enWord').value+"&type="+type+"&rand="+Math.random();
var en=$('enWord').value;
//$('enWord').value="";
}
//發送Ajax補全
else if(type==2)
{
var data="?enword="+$('enWord').value+"&type="+type+"&rand="+Math.random();
var en=$('enWord').value;
}
//window.alert(type);
xmlhttp=getXMLHttpRequest();
if (xmlhttp)
{
xmlhttp.open("get", url+data,true);
//window.alert(url+data);
xmlhttp.onreadystatechange=function()
{
//window.alert(xmlhttp.readyState);
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var res=xmlhttp.responseText;
res=eval("("+res+")");
//window.alert(res.flag);
if(res.flag==1)
{
words= res.result;
//window.alert(words.length);
item='';
for(i in words)
{
item += "<p style = ' border: 1px solid gray; width:650px; background-color:grey; color: #000090;'>"+words[i]+"<p>";
}
$("chWord").innerHTML= "<span style='color:#a00000;'>"+en+"</span>"+":<br /> "+item;
}
else if(res.flag==2)
{
var parent=document.getElementById("showRes");
var result=res.result;
clearFill();
for(i in result)
{
var text=document.createTextNode(result[i]);
var li=document.createElement("li");
li.appendChild(text);
parent.appendChild(li);
li.onmouseover = function(){
this.className = "mouseOver" ; //鼠標指針經過時高亮
}
li.onmouseout = function(){
this.className = "mouseOut" ; //鼠標指針離開時恢復原樣
}
li.onclick = function(){
//用戶單擊某個匹配項時、設置輸入框爲該項的值
$("enWord").value = this.firstChild.nodeValue;
query(1);
clearFill(); //同時清除提示框
}
}
parent.style.display="block";
}
}
}
xmlhttp.send(null);
}
}
//捕捉回車鍵，如果是，進行查詢
function sendQuery(event)
{
var ul=$("showRes");
if(ul.style.display=="block")
{
ul.style.display="none";
}
query(1);
return false;
}
//補全時，發送ajax查詢
function sendFill(event)
{
var val=$("enWord").value;
if(val.length >=2 )
{
query(2);
}
}
UlIndex=0;
function send(event)
{
//當檢測到按下的是回車鍵時
if(event.keyCode == 13)
{
sendQuery(event);
}
//當檢測到按下的是a-z A-Z時
else if(event.keyCode>=65 && event.keyCode<=90 || event.keyCode>=97&&event.keyCode<=122)
{
sendFill(event);
}
//當檢測到按下的是向下鍵時
else if(event.keyCode == 40 || event.keyCode == 39)
{
if($("showRes").hasChildNodes())
{
var items = $("showRes").childNodes;
var len = items.length;
//window.alert(len);
if(len>0)
{
if((UlIndex++) >= len){UlIndex = len;}
//window.alert(items[UlIndex].firstChild.nodeValue);
//items[UlIndex%len].onfocus = function(){this.style.backgroundColor="#aabbcc";}
//event.target.style.background-color="#aabbcc";
$("enWord").value = items[UlIndex%len].firstChild.nodeValue;
}
if(event.keyCode==39)
{
sendQuery();
}
}
}
//當檢測到按下的是向上鍵時
else if(event.keyCode == 38 || event.keyCode == 39)
{
if($("showRes").hasChildNodes())
{
var items = $("showRes").childNodes;
var len = items.length;
if(len>0)
{
if((UlIndex--) <= 0){UlIndex = 0;}
//items[((--UlIndex)%len)].style.background-color="#aabbcc";
$("enWord").value = items[(UlIndex%len)].firstChild.nodeValue;
}
if(event.keyCode==39)
{
sendQuery();
}
}
}
else if(event.keyCode==8)
{
sendFill();
if($("enWord").value.length<=1)
{
clearFill();
}
}
}
//清空輸入框
function clearContent()
{
$("enWord").value="";
return false;
}
function $(id)
{
return document.getElementById(id);
}
window.onload = function()
{
$("enWord").setAttribute("autocomplete", "off");
$("enWord").focus();
}
</script>
<style rel="stylesheet" type="text/css">
#outer{margin-left: 400px;}
#markup{margin-top:5px;}
#his{color:gray;
font-size:16px;}
#showRes{
background-color:white;
border: 1px solid gray;
width:650px;
display:none;
list-style: none;
margin: 0px; padding: 0px;
z-index:10;}
#enWord{
width:650px;
height:40px;
border:2px solid gray;
margin-top:10px;
margin-bottom:0px;
padding: 1px;
font-size:14px;
}
#sendButton{
width:65px;
height:35px;
padding: 1px;
font-family: Arial,Helvetica,sans-serif;
font-size:16px;
}
#chWord{position:relative;
left:10px;
top:30px;
width:710px;
font-size:20px;
}
ul{
list-style: none;
margin: 0px; padding: 0px;
z-index:11;
}
li.mouseOver{
background-color: #eeeeee;
color: #aabbcc;
font-size:18px;
font-weight:bold;
}
li.mouseOut{
background-color: #FFFFFF;
color: #004a7e;
}
</style>
</head>
<body bgcolor="#RGB(67,65,65)">
<div id="outer">
<img src="./image/logo.jpg" /><br />
<div id="markup">
<a href="./paragraph/speech.php" id="his" target="_blank">美文欣賞</a>
<a href="./review/getHisFromMysql.php" id="his" target="_blank">查詢歷史</a>
<a href="./addword/addword.html" id="his" target="_blank">添加詞條</a>
<a href="./dict_info/dict.info.php" id="his" target="_blank">字典信息</a>
<a href="./friend/friend.html" id="his" target="_blank">發佈交友</a>
<a href="./advice/advice.html" id="his" target="_blank">意見反饋</a>
</div>
<input type="text" id="enWord" οnclick="clearContent();" οnkeyup="setTimeout(send(event),300);" οnblur="clearFill();"/>
<input type="button" id="sendButton" value="查詢" οnclick="query(1);" /><br />
<ul id="showRes">
</ul>
<div id="chWord"><div>
</div>
</body>
</html>
<!--the problem is when i enter three char, in fact , the js only send two char, it's can observe d by chrome console , but i had set val=$("enWord").value;if(val.length >=2 ) query(2);then i use setTimeout() to check οnkeydοwn="setTimeout(send(event),300);" it's seem like not a event catca delay problem-->