学步园

参考站点：http://search.gongkong.com/search.aspx

suggest.js文件（在引入suggest.js文件前需要先引入jquery-1.4.2.min.js）：

 $(function() {<br /> var k = -1;<br /> //给查询文本框绑定click keyup事件，进行这两个事件，自动查询数据<br /> $("#FrmChangshang").bind('click keyup', function(event) {<br /> //获取键盘操作事件代码<br /> var keyc = event.keyCode || event.which || event.charCode;<br /> //查询数据为空，或者键盘操作代码为上下移动键，不进行查询操作<br /> if ($("#FrmChangshang").val().length > 0 && keyc != 38 && keyc != 40) {<br /> $.ajax({<br /> url: "SearchCompany.ashx",<br /> //firefox下必须对cname的编码，否则取不到数据，转换为utf-8也可以<br /> data: "cname=" + escape($("#FrmChangshang").val()),<br /> type: "get",<br /> cache: false,<br /> dataType: "xml",<br /> beforeSend: function(XMLHttpRequest) {<br /> //请求前，列表曾显示加载数据提示<br /> $("#name_table_body").append("<tr><td>数据加载中......</td></tr>");<br /> },<br /> success: function(data, textStatus) {<br /> //设置层样式<br /> divsOffset();<br /> //先清空列表<br /> $("#name_table_body").html("");<br /> //返回数据成功，添加到列表,并为创建的表格td添加相应属性<br /> $("content", data).each(function(i, domEle) {<br /> $("<tr></tr>").append($("<td></td>", {<br /> mouseout: function() {<br /> $(this).css({ "backgroundColor": "#ffffff", "font-size": "15px", "color": "#000000" });<br /> },<br /> mouseover: function(tdi) {<br /> return function() {<br /> k = tdi; setStyle(k);<br /> $("#FrmChangshang").val($(this).text());<br /> };<br /> } (i),<br /> style: "background-color:#FFFAFA;font-size:15px;border:0;"<br /> }<br /> ).append($(domEle).children("name").text())).appendTo("#name_table_body");<br /> });<br /> },<br /> complete: function(XMLHttpRequest, textStatus) {<br /> //请求完成！<br /> },<br /> error: function(XMLHttpRequest, textStatus, errorThrown) {<br /> //请求出错处理<br /> $("#name_table_body").html("").append("<tr><td >错误提示：出见异常！！！</td></tr>");<br /> }<br /> })<br /> }<br /> })<br /> //用键盘上下键移动时，样式设置函数<br /> function setStyle(num) {<br /> $("#name_table_body").find("td").each(function(Tindex, TdomEle) {<br /> if (Tindex == num) {<br /> $(TdomEle).css({ "backgroundColor": "#3366cc", "font-size": "15px", "color": "#ffffff", "cursor": "pointer" });<br /> }<br /> else {<br /> $(TdomEle).css({ "backgroundColor": "#ffffff", "font-size": "15px", "color": "#000000" });<br /> }<br /> });<br /> }<br /> //查询框失去焦点清除数据，并隐藏<br /> $("#FrmChangshang").blur(function() {<br /> $("#name_table_body").html("");<br /> $("#popup").hide();<br /> })<br /> //获取键盘上下键，通过上下键移动获取选中数据，同时更改其样式<br /> $("#FrmChangshang").keydown(function(event) {<br /> var tBody = $("#name_table_body").find("td").get();<br /> var keyc = event.keyCode || event.which || event.charCode;<br /> if (tBody == null)<br /> return;<br /> if (keyc == 40) {<br /> k++;<br /> if (k >= tBody.length) {<br /> k = 0;<br /> }<br /> $("#FrmChangshang").val(tBody[k].firstChild.nodeValue);<br /> }<br /> else if (keyc == 38) {<br /> k--;<br /> if (k <= -1) {<br /> k = tBody.length - 1;<br /> }<br /> $("#FrmChangshang").val(tBody[k].firstChild.nodeValue);<br /> }<br /> setStyle(k);<br /> });<br /> //设置层样式及绝对坐标<br /> function divsOffset() {<br /> $("#popup").show();<br /> var inputTop = $("#FrmChangshang").offset().top;<br /> var inputLeft = $("#FrmChangshang").offset().left;<br /> var inputHeight = $("#FrmChangshang").outerHeight();<br /> var inputWidth = $("#FrmChangshang").width();<br /> $("#name_table").width(inputWidth + 2);<br /> $("#popup").css({ "top": (inputTop + inputHeight), "width": inputWidth + 2, "left": inputLeft, "position": "absolute", "border": "#817f82 1px solid" });<br /> }<br /> })

SearchCompany.ashx文件

 <%@ WebHandler Language="C#" Class="SearchCompany" %><br /> using System;<br /> using System.Web;<br /> using System.Data;<br /> using System.Data.SqlClient;<br /> using System.Configuration;</p> <p>public class SearchCompany : IHttpHandler {</p> <p> public void ProcessRequest(HttpContext context)<br /> {<br /> string strconn = ConfigurationManager.ConnectionStrings["DBConn"].ConnectionString;<br /> string keyword = context.Request.QueryString["cname"];<br /> //string keycontext.Responseword = "河北";<br /> //此处更改为您自己的sql或者存储过程<br /> string sql = "select Member_TrueName from users where Member_TrueName like '%" + @keyword + "%' and Member_ShenFen=1 order by id desc";<br /> //context.Response.Write(sql);<br /> //context.Response.End();<br /> SqlParameter spr = new SqlParameter(@keyword, SqlDbType.NVarChar, 50);<br /> spr.Value = keyword;<br /> SqlCommand cmd = new SqlCommand(sql);<br /> context.Response.CacheControl = "no-cache";<br /> context.Response.Clear();<br /> context.Response.ContentType = "text/xml";<br /> context.Response.Write("<?xml version=/"1.0/" encoding=/"GB2312/"?>");<br /> context.Response.Write("<response>");<br /> using (SqlConnection sqlconn = new SqlConnection(strconn))<br /> {<br /> sqlconn.Open();<br /> cmd.Connection = sqlconn;<br /> SqlDataReader dre = cmd.ExecuteReader();<br /> if (dre.HasRows)<br /> {<br /> while (dre.Read())<br /> {<br /> context.Response.Write("<content>");<br /> context.Response.Write("<name>" + dre.GetString(0) + "</name>");<br /> context.Response.Write("</content>");<br /> }<br /> }<br /> else<br /> {<br /> context.Response.Write("<content>");<br /> context.Response.Write("<name>暂无查询数据</name>");<br /> context.Response.Write("</content>");<br /> }<br /> context.Response.Write("</response>");<br /> dre.Close();</p> <p> }<br /> }<br /> public bool IsReusable {<br /> get {<br /> return false;<br /> }<br /> }</p> <p>}

 Default.aspx前台文件

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %></p> <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p> <p><html xmlns="http://www.w3.org/1999/xhtml"><br /> <head runat="server"><br /> <title>无标题页</title><br /> <mce:script src="jquery-1.4.2.min.js" mce_src="jquery-1.4.2.min.js" language="javascript" type="text/javascript"></mce:script><br /> <mce:script language="javascript" type="text/javascript" src="suggest.js" mce_src="suggest.js"></mce:script><br /> </head><br /> <body><br /> <form id="form1" runat="server"><br /> <div><br /> <table><br /> <tr><br /> <td><br /> </td><br /> <td><br /> </td><br /> <td><br /> </td><br /> </tr><br /> <tr><br /> <td ><br /> </td><br /> <td><br /> </td><br /> <td><br /> </td><br /> </tr><br /> <tr><br /> <td><br /> </td><br /> <td><br /> </td><br /> <td><input id="FrmChangshang" name="FrmChangshang" type="text" style="width: 320px;" maxlength="20"/><br /> <div id="popup"><br /> <table id="name_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="3px"><br /> <tbody id="name_table_body"></tbody><br /> </table><br /> </div><br /> </td><br /> </tr><br /> </table></p> <p> <br /><br /> <br /><br /> <br /></p> <p> </div></p> <p> </form><br /> </body><br /> </html><br />