有个“收件人输入自动补齐”功能:在收件人框里输入汉字或字母,输入框会自动以下拉列表形式显示匹配的联系人列表。一条联系人地址包括两部分,姓名和邮箱地址。 用户输入可以与邮箱地址或姓名匹配。
联系人有三个来源: 1. 域的公共联系人列表(保存在服务器上)2. 个人的联系人列表(保存在服务器上)3. 个人在本地曾经输入过的收件人(保存在本地cookie) 这三个列表里,可能会存在重复的联系人。 现在的问题是:请给出一个解决方案,能够实现输入自动补齐功能,即在下拉列表中动态显示上述三个源中满足用户输入的联系人,同时下拉列表不能出现重复的联系人。 要求尽量提高系统的性能(响应速度),减少使用的资源(内存、带宽等)。
联系人有三个来源: 1. 域的公共联系人列表(保存在服务器上)2. 个人的联系人列表(保存在服务器上)3. 个人在本地曾经输入过的收件人(保存在本地cookie) 这三个列表里,可能会存在重复的联系人。 现在的问题是:请给出一个解决方案,能够实现输入自动补齐功能,即在下拉列表中动态显示上述三个源中满足用户输入的联系人,同时下拉列表不能出现重复的联系人。 要求尽量提高系统的性能(响应速度),减少使用的资源(内存、带宽等)。
存在cookie里面不知道什么是匹配的
没有看另外两个之一
把这三个域看成是一个整体,比如一个数组,数组中cookie的内容是放在最前面的。将用户输入内容从数组的开始位置开始匹配。
只需要取到匹配的第一个,整个数组是否重复对你没有影响。
通过js键盘事件,获取输入的内容,再将内容发送给服务器,进行逻辑处理(与联系人做比较),结果再通过回调函数转给js,js对dom操作做个自动补齐框
js代码
var highlightindex = -1;
$(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() + 2);
wordInput.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();
var autoNode = $("#auto");
if (wordText != "") {
$.post("AutoComplete",{word:wordText},function(data){
var jqueryObj = $(data);
var wordNodes = jqueryObj.find("word");
autoNode.html("");
wordNodes.each(function() {
var wordNode = $(this);
$("<div>").html(wordNode.text()).appendTo(autoNode);
});
if (wordNodes.length > 0) {
autoNode.show();
} else {
autoNode.hide();
highlightindex = -1;
}
},"xml");
} else {
autoNode.hide();
highlightindex = -1;
}
} else if (keyCode == 38 || keyCode == 40) {
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","red");
}
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","red");
}
} 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() + "]被提交了");
}
}
});
$("input[type='button']").click(function() {
alert("文本框中的[" + $("#word").val() + "]被提交了");
});
})
<body>
示例<input type="text" id="word" />
<input type="button" value="提交" /><br /><br /><br />
<div id="auto"></div>
</body>
java代码
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;/**
* Created by IntelliJ IDEA.
* User: ming
* Date: 2008-6-14
* Time: 14:17:00
* To change this template use File | Settings | File Templates.
* 接收用户端请求
*/
public class AutoComplete extends HttpServlet{
protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
String word = httpServletRequest.getParameter("word");
httpServletRequest.setAttribute("word",word);
httpServletRequest.getRequestDispatcher("wordxml.jsp").
forward(httpServletRequest, httpServletResponse); } protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doGet(httpServletRequest, httpServletResponse); //To change body of overridden methods use File | Settings | File Templates.
}
}