xml.jsp代码
<%@ page contentType="text/xml;charset=UTF-8" language="java" %>
<words>
<word>1</word>
<word>12</word>
<word>123</word>
<word>1234</word>
<word>123456</word>
<word>1234567</word>
</words>
html代码
<html>
<head>
<title>Ajax谷歌自动补全仿制</title>
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/auto.js"></script>
</head>
<body>
自动补全<input type="text" id="word"/><input type="button" value="提交">
<br> <br><br>
<div id="auto"></div>
</body>
</html>
jslib/auto.js (添加css属性也添加进了js代码中)
var gaoliang = -1;
$(document).ready(function() {
var wordInput = $("#word");
var offset = wordInput.offset();
$("#auto").hide()//初始化隐藏补全框
.css("border", "1px black solid")
.css("position", "absolute")
.css("top", offset.top + wordInput.height() + 5 + "px")
.css("left", offset.left + "px")
.width(wordInput.width());
$("#word").keyup(function(event) {//输入框添加键盘监听事件
var ev = event || window.event;
var evCode = ev.keyCode;
if (evCode >= 65 && evCode <= 90 || evCode == 8 || evCode == 46) {
var wordText = $("#word").val();
if (wordText.length > 0) {
$.post("xml.jsp", {word:wordText}, function(data) {
var obj = $(data);//接受的xml数据变成jquery对象
var wordNodes = obj.find("word");//查找xml数据中word节点的值
var auto = $("#auto");
auto.html("");
wordNodes.each(function() {//遍历数组
var wordNode = $(this);
$("<div>").html(wordNode.text()).appendTo(auto);//遍历到的值,添加进补全框
});
if (wordNodes.length > 0) {
auto.show();
} else {
auto.hide();
gaoliang = -1;
}
}, "xml");
}
} else if (evCode == 38 || evCode == 40) {
if (evCode == 38) { //向上
var autoNodes = $("#auto").children("div");
if (gaoliang != -1) {//是否高亮补全框中div,全局状态变量gaoliang
autoNodes.eq(gaoliang).css("background-color", "white");//补全框div高亮
gaoliang--;
} else {
gaoliang = autoNodes.length - 1;
}
if (gaoliang == -1) {
gaoliang = autoNodes.length - 1;
}
autoNodes.eq(gaoliang).css("background-color", "red");
}
if (evCode == 40) { //向下
var autoNodes = $("#auto").children("div");
if (gaoliang != -1) {
autoNodes.eq(gaoliang).css("background-color", "white");
}
gaoliang++;
if (gaoliang == autoNodes.length) {
gaoliang = 0;
}
autoNodes.eq(gaoliang).css("background-color", "red");
}
}
else if (evCode == 13) { //回车提交
if (gaoliang != -1) {
var conText = $("#auto").children("div").eq(gaoliang).text().hide();
gaoliang = -1;
$("#word").val(conText);
} else {
alert("提交的内容为:" + $("#word").val());
}
}
});
$("input[type='button']").click(function() {
alert("提交的内容为:" + $("#word").val());
});
});