HTML、CSS、JS部分代码
<!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> <title>模仿google自动补全</title> <mce:script src="../Scripts/jquery-1.4.2-vsdoc.js" mce_src="Scripts/jquery-1.4.2-vsdoc.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- var highlightIndex = -1; //定义高亮提示节点的索引值 var timeOutID;//定义延时时间id $(function () { var input = $("#input"); var inputOffset = input.offset(); //装载时隐藏自动补全的提示框,并设置其基本样式（宽度，定位，边框...） $("#auto").hide().css("border", "1px black solid").css("position", "absolute") .css("top", inputOffset.top + input.width + "px") .css("left", inputOffset.left + "px").width(input.width() + 3); $("#search").click(function () { alert('你输入的内容是【' + $("#input").val() + '】已经提交的服务器'); }) //给文本框注册键盘按下并弹起的事件 input.keyup(function (event) { // 处理文本框中键盘按下事件 var myEvent = event || window.event; var keyCode = myEvent.keyCode; //获取按下键盘的键值 //输入的是英文，或退格键、del键，应该将输入的信息提交给服务器端 if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46) { //1.获取文本框中内容 var inputVal = input.val(); //2.将输入的信息发送给服务器端 if (inputVal != "") { //如果输入的信息不为空，则提交给服务器 clearTimeout(timeOutID);//对上次未完成的延时进行取消 //使用延时，避免频繁交互影响服务器端性能 timeOutID = setTimeout(function () { $.post("AutoComplete.ashx", { input: inputVal }, function (data) { //将data数据转换为jQuery对象 var jQueryObj = $(data); //找到服务端返回的xml数据的所有input节点 var inputNodes = jQueryObj.find("input"); //遍历所有的input节点，取出单词内容，并将单词内容添加到提示框中 //在添加之前，先将提示框内容清除掉，避免重复 $("#auto").html(""); inputNodes.each(function (i) { //遍历解析XML，获取单个节点 var inputContent = $(this); //新建div节点，将单词的内容添加到该节点 //再将新添加的div节点拼接到提示框div中 var newDivNod = $("<div>").attr("id", i); //定义新节点并给其赋id（索引） newDivNod.html(inputContent.text()).appendTo($("#auto")); newDivNod.hover( //鼠标进入 function () { if (highlightIndex != -1) { //如果有高亮节点，就取消当前的高亮节点，让其背景色变白 $("#auto").children("div").eq(highlightIndex).css("background-color", "white"); } //让鼠标进入的那个节点高亮显示 highlightIndex = $(this).attr("id"); //将当前节点的id（其实是索引），赋值给高亮节点的索引 $(this).css("background-color", "red"); }, //鼠标离开 function () { $(this).css("background-color", "white"); // highlightIndex = -1; }); //点击该高亮节点，直接将该节点的文本内容提交 newDivNod.click(function () { $("#input").val($(this).text()); $("#auto").hide(); alert('你输入的内容是【' + $(this).text() + '】已经提交的服务器'); }) }) //如果服务器端有返回数据，就将提示框显示 if (inputNodes.length > 0) { $("#auto").show(); } else { $("#auto").hide(); } }, "xml"); }, 500) } else { $("#auto").hide(); //如果输入框的内容为空，隐藏提示框 } } else if (keyCode == 38 || keyCode == 40) { //如果按的是向上键38或向下键40 if (keyCode == 38) { //向上 var autoNodes = $("#auto").children("div"); //获取提示框中的全部提示内容--div子节点 if (highlightIndex != -1) { //如果原来存在高亮节点，则将背景色改为白色 autoNodes.eq(highlightIndex).css("background-color", "white"); highlightIndex--; //索引值自减 } else { highlightIndex = autoNodes.length - 1; } if (highlightIndex == -1) { //如果索引值为-1后，将索引值指回最后一个元素节点，让最后一个元素高亮 highlightIndex = autoNodes.length - 1; }; //让现在高亮的节点背景色变成红色 autoNodes.eq(highlightIndex).css("background-color", "red"); //获取高亮节点的文本内容,并赋给文本框 var txtVal = $("#auto").children("div").eq(highlightIndex).text(); $("#input").val(txtVal); } else { //向下 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"); var txtVal = $("#auto").children("div").eq(highlightIndex).text(); $("#input").val(txtVal); } } else if (keyCode == 13) { //如果按下的是回车 alert('你输入的内容是【' + $("#input").val() + '】已经提交的服务器'); $("#auto").hide(); //让提示框隐藏 //让文本框失去焦点(避免循环弹框) $("#input").get(0).blur(); } }) }) // --></mce:script> </head> <body> <center> <input type="text" id="input"/> <input type="button" value="想知道，就丁浪一下" id="search" /><br /> </center> <div id="auto"></div> </body> </html>
C#部分：ashx一般处理程序
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace LearningAspNet.自动补全 { /// <summary> /// AutoComplete 的摘要说明 /// </summary> public class AutoComplete : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/xml";//更改MIME类型，因为要返回xml数据 //接收客户端输入的数据，用于和服务器端的“单词”匹配(初步模型) string input = context.Request["input"]; //匹配并输出返回XML格式的数据 context.Response.Write("<inputs>");//XML根节点 if ("abs".StartsWith(input)) { context.Response.Write("<input>abs</input>"); } if ("add".StartsWith(input)) { context.Response.Write("<input>add</input>"); } if ("auto".StartsWith(input)) { context.Response.Write("<input>auto</input>"); } if ("apach".StartsWith(input)) { context.Response.Write("<input>apach</input>"); } if ("break".StartsWith(input)) { context.Response.Write("<input>break</input>"); } if ("blush".StartsWith(input)) { context.Response.Write("<input>blush</input>"); } if ("bool".StartsWith(input)) { context.Response.Write("<input>bool</input>"); } if ("blue".StartsWith(input)) { context.Response.Write("<input>blue</input>"); } if ("bind".StartsWith(input)) { context.Response.Write("<input>bind</input>"); } if ("context".StartsWith(input)) { context.Response.Write("<input>context</input>"); } if ("content".StartsWith(input)) { context.Response.Write("<input>content</input>"); } if ("campaq".StartsWith(input)) { context.Response.Write("<input>campaq</input>"); } if ("cool".StartsWith(input)) { context.Response.Write("<input>cool</input>"); } if ("code".StartsWith(input)) { context.Response.Write("<input>code</input>"); } if ("case".StartsWith(input)) { context.Response.Write("<input>case</input>"); } if ("drect".StartsWith(input)) { context.Response.Write("<input>drect</input>"); } if ("deafault".StartsWith(input)) { context.Response.Write("<input>deafault</input>"); } context.Response.Write("</inputs>");//xml根节点 } public bool IsReusable { get { return false; } } } }
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
