<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %> <!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> <mce:style><!-- .myColor { background-color:#3366CC; color:White; } --></mce:style><style mce_bogus="1"> .myColor { background-color:#3366CC; color:White; } </style> <mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script> <mce:script type="text/javascript"><!-- function changeColor(obj) { $(obj).toggleClass("myColor"); } // --></mce:script> </head> <body> <form id="form1" > <div id="myDiv" > <input type="text" id="txt_input" /></div> </form> <mce:script language="javascript" type="text/javascript"><!-- $(function(){ $("#myDiv").keyup(function(){ $.get("Handler1.ashx?keywork="+$("#txt_input").val()+"",function(data,textStatus){ if(data!="") { var width=$("#txt_input").outerWidth(); if($("#myDiv").html()!="") { $("#myDiv1").remove(); } $("#myDiv").append("<div id='myDiv1' style='border-style: solid; border-width:1px;width:"+width+"px' ></div>"); var strs=data.split(';'); for(var i=0;i<strs.length;i++) { $("#myDiv1").append("<div id='div"+i+"' width='"+width+"px'>"+strs[i]+"</div>"); $("#div"+i).hover(function(){changeColor(this)},function(){changeColor(this)}); $("#div"+i).click(function(){$("#txt_input").val($(this).text());$("#myDiv1").remove()}) } } else { if($("#myDiv1").html()!="") { $("#myDiv1").remove(); } } }) }) }) // $(function(){ // // $("#myDiv1").append("<div id='div1' width='"+width+"px' >1</div>"); // $("#myDiv1").append("<div id='div2' width='"+width+"px' >2</div>"); // $("#div1").hover(function(){changeColor(this)},function(){changeColor(this)}) // $("#div2").hover(function(){changeColor(this)},function(){changeColor(this)}) // }) // --></mce:script> </body> </html> Handler1.ashx using System; using System.Collections; using System.Data; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Xml.Linq; using System.Web.UI.MobileControls; using System.Collections.Generic; namespace WebApplication1 { /// <summary> /// $codebehindclassname$ 的摘要说明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class Handler1 : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; List<string> dataSource = new List<string>(); for (int i = 0; i < 100; i++) { dataSource.Add(i.ToString()); } string rtn = ""; if (!String.IsNullOrEmpty(context.Request["keywork"].ToString())) { string keywork = context.Request.QueryString["keywork"].ToString(); foreach (string item in dataSource) { if (item.StartsWith(keywork)) { rtn += item + ";"; } } if (rtn.Contains(";")) rtn = rtn.Remove(rtn.Length - 1, 1); } context.Response.Write(rtn); } public bool IsReusable { get { return false; } } } }