google suggest 下拉菜單(asp.net/jQuery版本)

參考站點：http://search.gongkong.com/search.aspx

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

 $(function() { var k = -1; //給查詢文本框綁定click keyup事件，進行這兩個事件，自動查詢數據 $("#FrmChangshang").bind('click keyup', function(event) { //獲取鍵盤操作事件代碼 var keyc = event.keyCode || event.which || event.charCode; //查詢數據爲空，或者鍵盤操作代碼爲上下移動鍵，不進行查詢操作 if ($("#FrmChangshang").val().length > 0 && keyc != 38 && keyc != 40) { $.ajax({ url: "SearchCompany.ashx", //firefox下必須對cname的編碼，否則取不到數據，轉換爲utf-8也可以 data: "cname=" + escape($("#FrmChangshang").val()), type: "get", cache: false, dataType: "xml", beforeSend: function(XMLHttpRequest) { //請求前，列表曾顯示加載數據提示 $("#name_table_body").append("<tr><td>數據加載中......</td></tr>"); }, success: function(data, textStatus) { //設置層樣式 divsOffset(); //先清空列表 $("#name_table_body").html(""); //返回數據成功，添加到列表,併爲創建的表格td添加相應屬性 $("content", data).each(function(i, domEle) { $("<tr></tr>").append($("<td></td>", { mouseout: function() { $(this).css({ "backgroundColor": "#ffffff", "font-size": "15px", "color": "#000000" }); }, mouseover: function(tdi) { return function() { k = tdi; setStyle(k); $("#FrmChangshang").val($(this).text()); }; } (i), style: "background-color:#FFFAFA;font-size:15px;border:0;" } ).append($(domEle).children("name").text())).appendTo("#name_table_body"); }); }, complete: function(XMLHttpRequest, textStatus) { //請求完成！ }, error: function(XMLHttpRequest, textStatus, errorThrown) { //請求出錯處理 $("#name_table_body").html("").append("<tr><td >錯誤提示：出見異常！！！</td></tr>"); } }) } }) //用鍵盤上下鍵移動時，樣式設置函數 function setStyle(num) { $("#name_table_body").find("td").each(function(Tindex, TdomEle) { if (Tindex == num) { $(TdomEle).css({ "backgroundColor": "#3366cc", "font-size": "15px", "color": "#ffffff", "cursor": "pointer" }); } else { $(TdomEle).css({ "backgroundColor": "#ffffff", "font-size": "15px", "color": "#000000" }); } }); } //查詢框失去焦點清除數據，並隱藏 $("#FrmChangshang").blur(function() { $("#name_table_body").html(""); $("#popup").hide(); }) //獲取鍵盤上下鍵，通過上下鍵移動獲取選中數據，同時更改其樣式 $("#FrmChangshang").keydown(function(event) { var tBody = $("#name_table_body").find("td").get(); var keyc = event.keyCode || event.which || event.charCode; if (tBody == null) return; if (keyc == 40) { k++; if (k >= tBody.length) { k = 0; } $("#FrmChangshang").val(tBody[k].firstChild.nodeValue); } else if (keyc == 38) { k--; if (k <= -1) { k = tBody.length - 1; } $("#FrmChangshang").val(tBody[k].firstChild.nodeValue); } setStyle(k); }); //設置層樣式及絕對座標 function divsOffset() { $("#popup").show(); var inputTop = $("#FrmChangshang").offset().top; var inputLeft = $("#FrmChangshang").offset().left; var inputHeight = $("#FrmChangshang").outerHeight(); var inputWidth = $("#FrmChangshang").width(); $("#name_table").width(inputWidth + 2); $("#popup").css({ "top": (inputTop + inputHeight), "width": inputWidth + 2, "left": inputLeft, "position": "absolute", "border": "#817f82 1px solid" }); } })

 

SearchCompany.ashx文件

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

 

 Default.aspx前臺文件

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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:script src="jquery-1.4.2.min.js" mce_src="jquery-1.4.2.min.js" language="javascript" type="text/javascript"></mce:script> <mce:script language="javascript" type="text/javascript" src="suggest.js" mce_src="suggest.js"></mce:script> </head> <body> <form id="form1" runat="server"> <div> <table> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td > </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td><input id="FrmChangshang" name="FrmChangshang" type="text" style="width: 320px;" maxlength="20"/> <div id="popup"> <table id="name_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="3px"> <tbody id="name_table_body"></tbody> </table> </div> </td> </tr> </table> <br /> <br /> <br /> </div> </form> </body> </html>