Keyup事件
<!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>
<style type="text/css">
ul{list-style-type:none; padding:0px; margin:0px;}
li{list-style-type:none; padding:2px; margin:0px;cursor:pointer;border:1px solid transparent;}
</style>
<script language="javascript" type="text/javascript" src="JS/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document.body).ready(function()
{
$("#get_name").keyup(function()
{
var left=$(this).offset().left;
var top=$(this).offset().top;
var width=$(this).width();
var height=$(this).height();
var newTOP=top+height+5;
var id=$(this).attr("id")+"_div";
var suggestVal=$(this).val();
$.ajax({
type:"POST",
url:"Handler.ashx",
data:"cmd=GetSuggest&str="+suggestVal,
success:function(data)
{
var newOBJECT=$("#"+id);
if(newOBJECT.length==0){
var html="<div style='position:absolute;left:"+left+"px;top:"+newTOP+"px;width:"+width+"px;padding:2px;border:1px solid #e7e8e9;background-color:#f1f1f1' id='"+id+"'>woody.wu</div>";
$(document.body).append(html);
}
else
{
newOBJECT.show();
}
newOBJECT.empty();
newOBJECT.html(data);
newOBJECT.find("ul").find("li").hover(function()
{
$(this).css({"background-color":"yellow","border":"1px dashed #e0e0e0"});
},function()
{
$(this).css({"background-color":"transparent","border":"1px solid transparent"});
});
newOBJECT.find("ul").find("li").click(function()
{
var va=$(this).html();
$("#get_name").val(va);
//newOBJECT.hide();
});
$(document).click(function(event)
{
var oleft=newOBJECT.offset().left;
var otop=newOBJECT.offset().top;
var owidth=newOBJECT.width();
var oheight=newOBJECT.height();
var bodyScrollTop= document.documentElement.scrollTop || document.body.scrollTop;
var bodyScrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
bodyScrollTop=event.clientY+bodyScrollTop;
bodyScrollLeft=event.clientX+bodyScrollLeft;
var lLeft=oleft+owidth;
var lTop=oheight+otop;
if(!(bodyScrollTop>=otop && bodyScrollTop<=lTop && bodyScrollLeft>=oleft && bodyScrollLeft<=lLeft) )
{
newOBJECT.hide();
}
});
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server" >
<div>
<input type="text" id="get_name" name="get_name" maxlength="10" />
</div>
</form>
</body>
</html>
後台
<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
using System.Text;
using System.Data;
using System.Data.OleDb;
using System.Reflection;
using System.Reflection.Emit;
public class Handler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string Cmd = context.Request["cmd"];
if (!string.IsNullOrEmpty(Cmd))
{
MethodInfo Method = this.GetType().GetMethod(Cmd, BindingFlags.NonPublic | BindingFlags.Instance);
if (Method != null)
{
Method.Invoke(this, new object[] { context });
}
}
}
public bool IsReusable {
get {
return false;
}
}
void GetSuggest(HttpContext context)//這個內容可以根據數據庫離的內容來查詢
{
string vStr = context.Request["str"];
StringBuilder html = new StringBuilder();
Random rd = new Random();
int i = rd.Next(30);
string STR = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890~!@%#^*)@!_";
int m = STR.Length;
int k = 0;
string RaStr = string.Empty;
html.Append("<ul>");
for (int j = 0; j < i; j++)
{
RaStr = string.Empty;
for (int n = 0; n < 4; n++)
{
RaStr += STR[rd.Next(0, STR.Length)].ToString();
}
html.Append("<li>");
html.Append(RaStr);
html.Append("</li>");
}
html.Append("</ul>");
context.Response.Write(html.ToString());
}
}