有个“收件人输入自动补齐”功能:在收件人框里输入汉字或字母,输入框会自动以下拉列表形式显示匹配的联系人列表。一条联系人地址包括两部分,姓名和邮箱地址。 用户输入可以与邮箱地址或姓名匹配。
联系人有三个来源: 1. 域的公共联系人列表(保存在服务器上)2. 个人的联系人列表(保存在服务器上)3. 个人在本地曾经输入过的收件人(保存在本地cookie) 这三个列表里,可能会存在重复的联系人。 现在的问题是:请给出一个解决方案,能够实现输入自动补齐功能,即在下拉列表中动态显示上述三个源中满足用户输入的联系人,同时下拉列表不能出现重复的联系人。 要求尽量提高系统的性能(响应速度),减少使用的资源(内存、带宽等)。

解决方案 »

  1.   

    按一下键就把cookie里面相匹配的查出来放到层里面显示!
      

  2.   

    应该是从数据库中查询出来
    存在cookie里面不知道什么是匹配的
      

  3.   

    我也觉得问题的关键是如何去匹配cookie里面的记录已经在数据库中存在了?为了尽量提高性能,当收件人输入时应当是先显示cookie里面的收件人信息,然后再去读取服务器数据库中不包含cookie中已记录的信息且符合条件的信息,1. 域的公共联系人列表(保存在服务器上)2. 个人的联系人列表(保存在服务器上) 这两点的查询通过ID很容易进行匹配,关键就是如何去匹配cookie里面的记录使服务器能读取不包含cookie中已记录的信息?
      

  4.   

    没有人知道如何去匹配cookie与服务器中的信息么?
      

  5.   

    感觉这个不用想太多吧先看cookie
    没有看另外两个之一
    把这三个域看成是一个整体,比如一个数组,数组中cookie的内容是放在最前面的。将用户输入内容从数组的开始位置开始匹配。
    只需要取到匹配的第一个,整个数组是否重复对你没有影响。
      

  6.   

    用AJAX
    通过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() + "]被提交了");
        });
    })
      

  7.   

    html:
    <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.
        }
    }
      

  8.   

    楼上的是用jquery做的自动补全,基本上可以实现楼主的要求,不过没有读取cookie的代码