asp.net结合jQuery实现google suggest效果
软件环境：
jquery-1.2.js,vs 2003,ASP.NET 采用xml进行数据传递
AutoSug.aspx-----搜索页面,文本框键入查询关键字，列出返回结果后可点击键入文本框
Query.aspx------后台数据库查询数据
js/AutoSug.js----jquery处理代码
AutoSug.aspx <%@ Page language="c#" Codebehind="AutoSug.aspx.cs" AutoEventWireup="false" Inherits="JC.AutoSug" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML> <HEAD> <title>AutoSug</title> <LINK href="meiyun.css" type="text/css" rel="stylesheet"> <script src="js/jquery-1.2.js" type="text/javascript"></script> <script src="js/AutoSug.js" type="text/javascript"></script> </HEAD> <body MS_POSITIONING="GridLayout"> <form id="Form1" method="get" runat="server"> <INPUT id="tx1" style="Z-INDEX: 101; LEFT: 376px; WIDTH: 184px; POSITION: absolute; TOP: 168px; HEIGHT: 32px" type="text" size="25"> <DIV id="div1"></DIV> </form> </body> </HTML>
Query.aspx using System; using System.Collections; using System.ComponentModel; using System.Data; using System.Drawing; using System.Web; using System.Web.SessionState; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; using System.Data.OracleClient; namespace JC { /// <summary> /// Query 的摘要说明。 /// </summary> public class Query : System.Web.UI.Page { private void Page_Load(object sender, System.EventArgs e) { //获得前一个页面的文本框内容 string str=Request.Form["tx1"]; string array1=""; //查询数据库获得数据 string connString="server=wuliu;UID=meiyun;Password=meiyun;"; OracleConnection conn=new OracleConnection(connString); string sql="SELECT count(*) FROM YT_YSQY WHERE Y_QYMC LIKE '"+str+"%'"; string selectClause="SELECT distinct Y_QYMC FROM YT_YSQY WHERE Y_QYMC LIKE '"+str+"%'"; conn.Open(); OracleCommand command=new OracleCommand(sql,conn); OracleDataReader odr=command.ExecuteReader(); while(odr.Read()) { //如果记录条数大于100条，不返回，太多记录会影响性能 if(odr.GetInt32(0)>100) return; } command=new OracleCommand(selectClause,conn); odr=command.ExecuteReader(); //把查询数据写成一下形式 array1="<?xml version='1.0' encoding='gb2312'?><DATA_ROOT>"; while(odr.Read()) { array1+="<DATA_ROW>"+odr.GetValue(0).ToString()+"</DATA_ROW>"; } array1+="</DATA_ROOT>"; Response.ContentType="text/xml"; Response.Write(array1); Response.End(); } } }
js/AutoSug.js $(document).ready(function() { //回调 $("#tx1").keydown(function() { $.ajax({ url:"Query.aspx", //要将请求发送到的URL地址 type:"POST", //发送方式 dataType:"xml", //期望从服务器端返回的数据类型 timeout:2000, data:"tx1="+escape($('#tx1').val()), //传递的参数 success: function(xml) { //返回的数据 //创建一个data_set容器,来盛放下面循环的row元素 var data_set=document.createElement('data_set'); $(xml).find('DATA_ROW').each(function(){ var name_text = $(this).text(); var row= document.createElement("row"); //创建一个row元素，用于绑定上面动态生成的data_set下面 $(row).html(name_text+"<br>"); //把row转换为jquery对象。 $(data_set).append($(row)); // 绑定row到data_set }); //end each //查询结果显示在页面 //设置div1属性 var pos=$("#tx1").offset(); $("#div1").css({position:"absolute",left:pos.left,top:pos.top+32}); $("#div1").width($("#tx1").width()); $("#div1").addClass("div_style"); $("#div1").html(data_set); //选中显示 $("#div1").find("row").each( function(i){ $(this).hover( function() { $(this).addClass("hover_color"); }, function() { $(this).removeClass("hover_color"); }); });//end each //单击添入文本框内容 $("#div1").find("row").click(function() { $("#tx1").val($(this).text()); //清除对象 $("#div1").html(""); //$("#div1").addClass("div_style1"); }); },//end success error:function(){ $("#div1").html(""); //$("#div1").addClass("div_style1"); }//end error });//end ajax });//end tx1.keyup });//end document
