采用JQuery和.net中的一般处理程序实现文本框的自动补全,鼠标、键盘功能齐全 Html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>自动补全</title> <link href="css/test.css" mce_href="css/test.css" rel="stylesheet" type="text/css" /> <mce:script src="js/jquery.js" mce_src="js/jquery.js" type="text/javascript"></mce:script> <mce:script src="js/test.js" mce_src="js/test.js" type="text/javascript"></mce:script> </head> <body> <div id="con"> 自动补全:<input id="txt1" type="text" CssClass ="txt1" οnkeyup="findcon();"/> </div> <div id="popup"> <ul id="con_ul"></ul> </div> </body> </html> test.js文件 var hightlight =-1; var oInputField; //考虑到很多函数中都要使用 var oPopDiv; //因此采用全局变量的形式 var oconUl; function initVars(){ //初始化变量 oInputField = $("#txt1"); oPopDiv = $("#popup"); oconUl = $("#con_ul"); } function clearcon(){ //清除提示内容 oconUl.empty(); oPopDiv.removeClass("show"); } function setcon(the_con){ //显示提示框,传入的参数即为匹配出来的结果组成的数组 clearcon(); //每输入一个字母就先清除原先的提示,再继续 oPopDiv.addClass("show"); for(var i=0;i<the_con.length;i++) //将匹配的提示结果逐一显示给用户 oconUl.append($("<li>"+the_con[i]+"</li>")); oconUl.find("li").click(function(){ oInputField.val($(this).text()); clearcon(); }).hover( function(){$(this).addClass("mouseOver");}, function(){$(this).removeClass("mouseOver");} ); } function findcon(event){ initVars(); //初始化变量 var myEvent = event || window.event; var keycode = myEvent.keyCode; //获取键盘键值 if ((keycode >= 65 && keycode <= 90) || keycode==8 || keycode == 46) { if(oInputField.val().length > 0){ //获取异步数据 var url="handler/test.ashx?parms="+oInputField.val(); $.get(url,function(data){ var aResult = new Array(); if(data.length > 0){ aResult = data.split(","); setcon(aResult); //显示服务器结果 } else clearcon(); }); } else{ clearcon(); //无输入时清除提示框(例如用户按del键) hightlight = -1 } }else if(keycode==38||keycode==40){ //如果输入的是向上向下 if(keycode==38){ //向上 var autoNodes = oconUl.find("li"); if (hightlight != -1 ){ //把高亮节点恢复 autoNodes.eq(hightlight).removeClass("mouseOver"); hightlight--; }else{ hightlight = autoNodes.length - 1 } if(hightlight == -1){ //如果到顶 把高亮移动到最后 hightlight = autoNodes.length - 1; }; autoNodes.eq(hightlight).addClass("mouseOver"); } if(keycode==40){ //向下 var autoNodes =oconUl.find("li"); if (hightlight != -1 ){ //把高亮节点恢复 autoNodes.eq(hightlight).removeClass("mouseOver"); } hightlight++; if(hightlight == autoNodes.length){ //如果到顶 把高亮移动到最后 hightlight = 0; } autoNodes.eq(hightlight).addClass("mouseOver"); } }else if (keycode==13){ //如果输入的是回车 if(hightlight!=-1){ //取出节点的内容 var context = oconUl.find("li").eq(hightlight).text(); clearcon(); hightlight = -1; oInputField.val(context); } } } test.css文件 body { font-family:Arial; font-size:14px; padding:0px; margin:10px; } .txt1 { /* 用户输入框的样式 */ width:200px; } #popup { /* 提示框div块的样式 */ position:absolute; left:80px; top:32px; width:204px; /*border:solid 1px black;*/ color:#004a7e; } #popup.show{ /* 显示提示框的边框 */ border:1px solid #004a7e; } ul{ list-style:none; margin:0px; padding:0px; color:#004a7e; } li.mouseOver{ background-color:#004a7e; color:#FFFFFF; } test.ashx一般处理程序文件 <%@ WebHandler Language="C#" Class="test" %> using System; using System.Web; using System.Data; public class test : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; string str=context.Request.QueryString["parms"]; if (str.Length == 0) { return; } string result = ""; string[] name = new string[] { "a","b","c","d","e","f","g","a2","b2","c2","d2","e2","f2","g2","a3","b3","c3","d3","e3","f3","g3","a4","b4","c4","d4","e24","f4","g4" }; for (int i = 0; i < name.Length; i++) { if (name[i].IndexOf(str) == 0) result += name[i] + ","; } if (result.Length > 0) //如果有匹配项 result = result.Substring(0, result.Length - 1); //去掉最后的“,”号 context.Response.Write(result); } public bool IsReusable { get { return false; } } }