下午做了个“自动补全”的小例子

来源：互联网发布：语音网络系统新生注册编辑：程序博客网时间：2024/04/27 18:46

HTML、CSS、JS部分代码

Code:

<!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>
<script src="../Scripts/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
var highlightIndex = -1; //定义高亮提示节点的索引值
var timeOutID;//定义延时时间id
$(function () {
var input = $("#input");
var inputinputOffset = 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 inputinputVal = 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();
}
})
})
</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一般处理程序

Code:

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;
}
}
}
}