asp.net结合jQuery实现googlesuggest效果

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

软件环境：
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 >
           <INPUT >
           <DIV ></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