Question

QQ邮箱的这种效果是怎么实现的？能贴上.NET代码跟jquery代码最好了！

Answer 1

这是我做的一个实例： 

HTML代码：

<input type="text" id="Code" onkeyup="ByCode()" style="width:100px;" />
           悔数        <div id="CodeDiv" style="overflow:auto;margin-left:16px;width:100px;height:120px;display:none; border:1px solid #CCC;position:fixed; background-color:White;"></div>

JS代码：

这个方法是写在文本框的onkeyup事件中的。

$("#CodeDiv").show();  //文本框获得焦点 DIV显示
                $.ajax({
                    type: 'post',
                    contentType: "application/json;charset=utf-8",
                    url: '/Progress/ByCode?code=' + code + '',   //把值传到后台
                    data: null,
                    success: function (data) {
                        $("#CodeDiv").append(data);
                    },
                    error: function (a, b, d) {
                        alert("操作失败");
                    }
                });

后台代码：

public string ByCode()
       {
           string strhtml = "";
           string code = Request["code"];
       虚信    if (code != "" && code != null)
           {
               List<M_RepairProgram> RepList = _RepairProgramRepository.GetAll().Where(r => r.Code.Contains(code)).ToList<M_RepairProgram>();
               if (RepList.Count <= 0)
               {
                   strhtml += "<span style='text-align:left;'>";
                   strhtml += "<a href='#' style='color:red;' >无效的检索条件</a>";
                   strhtml += "<br/><hr/>";
                   strhtml += "</span>";
               }
               else
               {
                   foreach (var item in RepList)
                   {
                       strhtml += "<span style='text-align:left;'>";
                       strhtml += "<a href='#' onclick='Codeclick(this)'>" + item.Code + "</a>";
                       strhtml += "<br/><hr/>";
                       strhtml += "</span>";
                   }
       差前轮        }
               return strhtml;
           }
           else {
               return "";
           }
       }

效果就是这个样子，当然还可以做到更好  

Answer 2

这唤手返个薯态 jquery ui 和饥里有现成的

追问

jQuery ui的自动完成插件我看过，就是要添加多个的时候我遇到困难了！

Answer 3

思路是：弹出一个层，层里加个列表，列表上加样式，层要跟光标同步。

追问

单击时收件人地址是存在哪的？(div还是input)；还有就是每次弹出层的时候怎么提交当前输入数据的数据到后台！

追答

按照你提供的图例来讲，他是在你提交完成以后自动保存收件人到后台数据库，
当你下次点击收件人输入框（input）时，它会自动根据你数据的数据从后台模糊查询出来（通过ajax 请求后台 查询语句“like '%收件人%'”），在展示到弹出的DIV中的列表中。