仿Google自动补全示例
1.?在MyEclipse中实现示例
??在MyEclipse中新建一个webProject，命名为AjaxDemo
??导入jquery框架，首先从网站上下载jquery，解压文件得到jquery的核心代码（jquery-1.4.2.min.js），在webRoot目录下新建一个jscode文件夹，将jquery-1.4.2.min.js代码copy到jscode文件夹下。
??首先新建一个html页面，命名为JQueryAutoComplete.html,代码如下：
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">
<html>
<head>
<title>自动补全示例演示</title>
<script?type="text/javascript"?src="jscode/jquery-1.4.2.min.js"></script>
<script?type="text/javascript"?src="jscode/jqueryauto.js"></script>
</head>
<body>
<center>
<h2>
仿Google自动补全示例
</h2>
<input?type="text"?id="word"?/>
<input?type="button"?value="搜索"?/>
<br?/>
</center>
<div?id="auto"></div>
</body>
</html>
<!--EndFragment-->?
以上代码需要注意：首先要在html页面中引用jquery的代码：
?
<script?type="text/javascript"?src="jscode/jquery-1.4.2.min.js"></script>
<!--EndFragment-->?
其次对于引入js代码的顺序要注意，先引入jquery代码，再引入自动补全的js实现代码
?
<script?type="text/javascript"?src="jscode/jqueryauto.js"></script>
?
?
?
?
并在web.xml文件配置：
<servlet>
????<servlet-name>AutoComplete</servlet-name>
????<servlet-class>com.tlj.test.AutoComplete</servlet-class>
??</servlet>
<servlet-mapping>
????<servlet-name>AutoComplete</servlet-name>
<url-pattern>/AutoComplete</url-pattern>
?</servlet-mapping>
?
<!--EndFragment--><!--EndFragment-->??在webRoot目录下新建一个jsp页面，命名为wordxml.jsp，其代码如下所示：
<%@?page?contentType="text/xml;charset=utf-8"?language="java"?%>
<%
String?word=(String)request.getAttribute("word");
%>
<words>
<%if("absolute".startsWith(word)){%>
<word>absolute</word>
<%}%>
<%if("anyone".startsWith(word)){%>
<word>anyone</word>
<%}%>
<%if("anything".startsWith(word)){%>
<word>anything</word>
<%}%>
<%if("apple".startsWith(word)){%>
<word>apple</word>
<%}%>
<%if("abandon".startsWith(word)){%>
<word>abandon</word>
<%}%>
<%if("breach".startsWith(word)){%>
<word>breach</word>
<%}%>
<%if("break".startsWith(word)){%>
<word>break</word>
<%}%>
<%if("boolean".startsWith(word)){%>
<word>boolean</word>
<%}%>
</words>
?
在这段代码中要注意处：第一句中contentType="text/xml;charset=utf-8"，其类型是xml类型。
??自动补全的核心代码是其的js代码，在jscode文件夹下建立jqueryauto.js，代码如下所示：
var?hightlightindex?=?-1;//高亮表示
var?timeoutId;//延迟加载
$(document).ready(function?()?{
//自动补全框开始应该隐藏起来
var?wordInput?=?$("#word");
var?wordInputOffset?=?wordInput.offset();
$("#auto").hide().css("border",?"1px?black?solid")
.css("position",?"absolute")
.css("top",?wordInputOffset.top?+?wordInput.height()?+?5?+?"px")
.css("left",?wordInputOffset.left?+?"px").width(wordInput.width());
//给文本框添加键盘按下的事件
wordInput.keyup(function?(event)?{
//处理文本框中的键盘事件
var?myEvent?=?event?||?window.event;
var?keyCode?=?myEvent.keyCode;
//如果输入的是字母，应该将文本框中的最新的信息发送给服务器
if?(keyCode?>=?65?&&?keyCode?<=?90?||?keyCode?==?8?||?keyCode?==?46)?{
//1.获取文本框中的内容
var?wordText?=?$("#word").val();
if?(wordText?!=?"")?{
clearTimeout(timeoutId);
????timeoutId?=?setTimeout(function?()?{
$.post("AutoComplete",?{word:wordText},?function?(data)?{
var?jqueryObj?=?$(data);
????//找到所有的word节点
var?wordNodes?=?jqueryObj.find("word");
var?autoNode?=?$("#auto");
????//需要清空原来的内容
autoNode.html("");
wordNodes.each(function?(i)?{
//获取单词内容
var?wordNode?=?$(this);
//新建div节点，将单词内容加入到新建的节点中
//将新建的节点加入到弹出框的节点中
var?newDivNode?=?$("<div>").attr("id",?i);
newDivNode.html(wordNode.text()).appendTo(autoNode);
newDivNode.mouseover(function?()?{
if?(hightlightindex?!=?-1)?{
??????????????????????????$("#auto").children("div").eq(hightlightindex)
.css("background-color",?"white");
? }
hightlightindex?=?$(this).attr("id");
$(this).css("background-color",?"red");
});
newDivNode.mouseout(function?()?{
$("this")..css("background-color",?"white");
});
newDivNode.click(function?()?{
var?comText?=?$(this).text();
$("#auto").hide();
hightlightindex?=?-1;
$("#word").val(comText);
});
});
???????//如果服务器端有数据，则显示弹出框
if?(wordNodes.length?>?0)?{
autoNode.show();
}?else?{
autoNode.hide();
hightlightindex?=?-1;
}
},?"xml");
},?500);
//2.将文本框中的内容发送给服务器
}?else?{
autoNode.hide();
hightlightindex?=?-1;
}
}?else?{
if?(keyCode?==?38?||?keyCode?==?40)?{
//输入是上下键
if?(keyCode?==?38)?{
//向上键
var?autoNodes?=?$("#auto").children("div");
if?(hightlightindex?!=?-1)?{
autoNodes.eq(hightlightindex).
css("background-color",?"white");
hightlightindex--;
}?else?{
hightlightindex?=?autoNodes.length?-?1;
}
if?(hightlightindex?==?-1)?{
hightlightindex?=?autoNodes.length?-?1;
}
autoNodes.eq(hightlightindex).css("background-color",?"red");
}
if?(keyCode?==?40)?{
??//向下键
var?autoNodes?=?$("#auto").children("div");
if?(hightlightindex?!=?-1)?{
autoNodes.eq(hightlightindex)
.css("background-color",?"white");
}
hightlightindex++;
if?(hightlightindex?==?autoNodes.length)?{
hightlightindex?=?0;
}
autoNodes.eq(hightlightindex).css("background-color",?"red");
}
}?else?{
if?(keyCode?==?13)?{
//输入的是回车
if?(hightlightindex?!=?-1)?{
var?comText?=?$("#auto").hide().children("div")
.eq(hightlightindex).text();
hightlightindex?=?-1;
$("#word").val(comText);
}?else?{
$("#auto").hide();
$("#word").get(0).blur();
}
}
}
}
});
});
<!--EndFragment--><!--EndFragment-->