Auto.js:
var heightlightindex = -1;
var timeout;
$(document).ready(function(){
var wordinput = $("#word");
//offset用于文档的偏移坐标
var inputoffset = wordinput.offset();
//自动补全的框最开始隐藏起来
$("#auto").hide().css("border","1px black solid")
.css("position","absolute")
.css("top",inputoffset.top+wordinput.height()+10 )
.css("left",inputoffset.left).width(wordinput.width());
//给文本框加上按下并谈起的事件
$("#word").keyup(function(event){
var myevent = event||window.event;
var keyCode = myevent.keyCode;
//如果最新的信息为字母应当发送到服务器端
if(keyCode >= 65 &&keyCode <= 90 || keyCode ==8|| keyCode ==46) {
var wordText = $("#word").val();
if(wordText!=""){
//定义全局的timeout延迟使得减少和服务器端的交互
//有效的提高其性能
clearTimeout(timeout);
timeout = setTimeout(function(){
$.post("AutoCompleteServlet", {word: wordText}, function (data) {
//将返回的dom对象转化为jquery
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(heightlightindex != -1 ) {
$("#auto").children("div").eq(heightlightindex)
.css("background-color","white");
}
heightlightindex = $(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();
heightlightindex = -1;
//填入文本框
$("#word").val(comText);
});
});
if (wordNodes.length > 0) {
autoNode.show();
} else {
autoNode.hide();
}
}, "xml");
},500);
}else{
$("#auto").hide();
heightlightindex = -1;
}
}else if(keyCode == 38||keyCode == 40){
//向上向下
if(keyCode == 38) {//向上
var autoNodes = $("#auto").children("div");
if (heightlightindex != -1) {
autoNodes.eq(heightlightindex).css("background-color", "white");
heightlightindex--;
}
else{
heightlightindex=autoNodes.length-1;
}autoNodes.eq(heightlightindex).css("background-color","red");
}else if(keyCode == 40){
var autoNodes = $("#auto").children("div");
if (heightlightindex != -1) {
autoNodes.eq(heightlightindex).css("background-color","white");
}
heightlightindex++;
if(heightlightindex==autoNodes.length){
heightlightindex=0;
}autoNodes.eq(heightlightindex).css("background-color","red");
}
}else if(keyCode == 13){
//选中高亮部分
if(heightlightindex!=-1){
var comText = $("#auto").children("div").eq(heightlightindex).text();
$("#auto").hide();
heightlightindex = -1;
//填入文本框
$("#word").val(comText);
}else{
alert("文本框的[" + $("#word").val()+"]被提交了");
$("#auto").hide();
$("#word").blur();
}
}
});
//给按钮添加事件表示数据被提交
$("input[type='button']").click(function(){
alert("文本框的[" + $("#word").val()+"]被提交了");
});
});
AutoComplete.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AutoComplete</title>
<script type="text/javascript" src="jslib/jquery-3.1.1.js"></script>
<script type="text/javascript" src="jslib/Auto.js"></script>
</head>
<body>
输入要搜索的字段:<input type="text" id="word" />
<input type="button" value="提交"/><br/>
<div id="auto"></div>
</body>
</html>
web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<servlet>
<servlet-name>AutoCompleteServlet</servlet-name>
<servlet-class>AutoCompleteServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AutoCompleteServlet</servlet-name>
<url-pattern>/AutoCompleteServlet</url-pattern>
</servlet-mapping>
</web-app>
提供的词汇库wordxml.jsp:
<%--
Created by IntelliJ IDEA.
User: Dqd
Date: 2016/11/6
Time: 10:22
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/xml;charset=UTF-8" language="java" %>
<%
String str = request.getParameter("word");
%>
<words>
<%if("anyone".startsWith(str)){%>
<word>anyone</word>
<%}%>
<%if("anything".startsWith(str)){%>
<word>anything</word>
<%}%>
<%if("absolute".startsWith(str)){%>
<word>absolute</word>
<%}%>
<%if("boolean".startsWith(str)){%>
<word>boolean</word>
<%}%>
<%if("break".startsWith(str)){%>
<word>break</word>
<%}%>
</words>
AutoCompleteServlet:
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* Created by Dqd on 2016/11/6.
*/
@WebServlet(name = "AutoCompleteServlet")
public class AutoCompleteServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String word = request.getParameter("word");
System.out.println(word);
request.setAttribute("word",word);
request.getRequestDispatcher("wordxml.jsp")
.forward(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}