jsp页面代码：
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>AutoComplete--仿google_suggest</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/autocomplete.js"></script>
</head>
<body>
<li>jQuery实例：输入框下拉提示，仿google suggest<input type="text" id="word" />
<input type="button" id="bt_sub" value="提交"/><br/>
<div id="auto"></div>
</body>
</html>
后台servlet代码：
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AutoComplete extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request,response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//表示页面传过来的字符串，用来和服务器端的单词进行匹配
String word = request.getParameter("word");
//将字符串保存在request对象中
request.setAttribute("word", word);
//将请求转发给视图层
request.getRequestDispatcher("wordxml.jsp").forward(request, response);
}
}
在web.xml中配置servlet：
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>AutoComplete</servlet-name>
<servlet-class>AutoComplete</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AutoComplete</servlet-name>
<url-pattern>/AutoComplete</url-pattern>
</servlet-mapping>
</web-app>
存放数据的jsp，模拟后台传来的数据，不是用来显示的：
<%@ page contentType="text/xml; charset=UTF-8" language="java" %>
<!-- 与传统的视图层不同，这个jsp返回的是xml的数据，因此contentType的值是text/xml -->
<%
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("boolean".startsWith(word)){%>
<word>boolean</word>
<%}%>
<%if("break".startsWith(word)){%>
<word>break</word>
<%}%>
<%if("create".startsWith(word)){%>
<word>create</word>
<%}%>
</words>
最后，最最重要的JavaScript代码：
var highlightindex = -1; //定义高亮显示索引
var timeOutId; //定义延迟时间
$(document).ready(function(){
var wordInput = $("#word");
var wordInputOffset = wordInput.offset();
//隐藏自动补全框,并定义css属性
$("#auto").hide()
.css("position","absolute")
.css("border","1px black solid")
.css("top",wordInputOffset.top + wordInput.height() + 5 + "px")
.css("left",wordInputOffset.left + "px")
.width(wordInput.width() + 2);
//给文本框添加键盘按下并弹起的事件
wordInput.keyup(function(event){
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;
var autoNode = $("#auto");
if(keyCode >= 65 && keyCode <=90 || keyCode == 8 || keyCode == 46){
//输入字母,退格或删除,显示最新的内容
var wordText = $("#word").val();
if(wordText != ""){
timeOutId = setTimeout(function(){
$.post("AutoComplete",{word:wordText},function(data){
var jqueryObj = $(data);
var wordNodes = jqueryObj.find("word");
autoNode.html("");
wordNodes.each(function(i){
var wrodNode = $(this);
var newDivNode = $("<div>").attr("id",i);
newDivNode.html(wrodNode.text()).appendTo(autoNode);
//添加光标进入事件,高亮节点
newDivNode.mouseover(function(){
if(highlightindex != -1){
$("#auto").children("div")
.eq(highlightindex)
.css("background-color","white");
}
highlightindex = $(this).attr("id");
$(this).css("background-color","gray");
});
//添加光标移出事件,取消高亮
newDivNode.mouseout(function(){
$(this).css("background-color","white");
});
//添加光标点击事件
newDivNode.click(function(){
var comText = $(this).text();
$("#auto").hide();
highlightindex = -1;
$("#word").val(comText);
});
});
if(wordNodes.length > 0){
autoNode.show();
}else{
autoNode.hide();
highlightindex = -1;
}
},"xml");
},500);
}else{
autoNode.hide();
highlightindex = -1;
}
}else if(keyCode == 38){
//输入向上,选中文字高亮
var autoNodes = $("#auto").children("div")
if(highlightindex != -1){
autoNodes.eq(highlightindex).css("background-color","white");
highlightindex--;
}else{
highlightindex = autoNodes.length - 1;
}
if(highlightindex == -1){
highlightindex = autoNodes.length -1;
}
autoNodes.eq(highlightindex).css("background-color","gray");
}else if(keyCode == 40){
//输入向下,选中文字高亮
var autoNodes = $("#auto").children("div")
if(highlightindex != -1){
autoNodes.eq(highlightindex).css("background-color","white");
}
highlightindex++;
if(highlightindex == autoNodes.length){
highlightindex = 0;
}
autoNodes.eq(highlightindex).css("background-color","gray");
}else if(keyCode == 13){
//输入回车
if(highlightindex != -1){
var comText = $("#auto").hide().children("div").eq(highlightindex).text();
highlightindex = -1;
$("#word").val(comText);
}else{
alert("文本框中的[" + $("#word").val() + "]被提交了！");
$("#auto").hide();
$("#word").get(0).blur();
}
}
});
//给按钮添加事件，表示文本框中的数据被提交
$("#bt_sub").click(function(){
alert("文本框中的[" + $("#word").val() + "]被提交了！");
});
});
355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
