基于jqury的自动完成

实现了上下键对滚动条的控制，并固定了首行

主要js文件 snryang.js

//  JScript 文件

var  DH_Title  =   null ;                     // 对象数组，对象有三个属性,Field对应数据库字段名 Name表格标题行显示的中文名 IsShow是否显示
var  DH_Control  =   null ;                   // input控件
var  DH_PostObj  =   null ;                   // 传到后台的参数
var  DH_KeyStr  =   null ;                    // 按键值
var  DH_CallBack  =   null ;                  // 回调函数，返回选择的对象
var  DH_SendPage  =   " AjaxMethod.aspx " ;     // 后台页面
var  DH_LoadStr  =   " 数据加载中 " ;          // 数据载入时显示的html代码
var  DH_Height  =   300 ;                     // div高度

var  DH_Date  =   null ;                      // post返回的数据
var  DH_Index  =   - 1 ;                       // 当前索引
var  DH_MaxIndex  =   null ;                  // 最大索引
var  DH_Div  =   null ;                       // div层
var  DH_DivTr  =   null ;                     // 层里表格下的所有行

function  DH_Show()
{
    if(DH_KeyStr != 38 && DH_KeyStr != 40 && DH_KeyStr != 13 && DH_KeyStr != null)
    {
        if($("#hide_div").length < 1)  //层不存在则插入
            $("body").append("<div style=\"position:absolute;height:" + DH_Height + "px;overflow-y:auto;border:solid 2px #95B7F3;\" id=\"hide_div\" ></div>");
        DH_Div = $("#hide_div");  
        DH_Div.empty();                 
        if(DH_PostObj != null && DH_Control != null)  
        {            
            DH_Div.css("top", getAbsoluteTop(DH_Control) + DH_Control.offsetHeight + 2 ); //设置层的top left属性
            DH_Div.css("left", getAbsoluteLeft(DH_Control) );
            DH_Div.html(DH_LoadStr);                                                        //填入数据载入时显示的html
            $.post(DH_SendPage ,DH_PostObj ,function(m){                
                eval(m);                
                DH_Date = renObj;
                DH_Div.html(JsonToTable());
                DH_Div.css("display","block");
                DH_DivTr = DH_Div.find("tr");
                DH_MaxIndex = DH_DivTr.length - 1;
                
                if(DH_MaxIndex > 0 )
                {
                    DH_Index = 1;
                    DH_DivTr.get(1).style.backgroundColor="#95B7F3";
                }
                else
                {
                    DH_Div.css("display","none");
                }
            }); 
        }
        else 
        {
            DH_Div.css("display","none");
        }
    } 
    else
    {
        if (DH_Index == -1)
            return;
            
         if(DH_Div.css("display")=="block")  
         {             
             if(DH_KeyStr == 13) //回车
             {
                 if(DH_CallBack != null)
                    DH_CallBack(DH_Date[DH_Index - 1]);                 
                 DH_Div.css("display","none");
                 DH_Index = -1 ;
             }
             else
             {   
                 if(DH_Index == -1)
                    return
                 
                 DH_DivTr.get(DH_Index).style.backgroundColor="";
                 
                 //按下键盘向下方向键
                 if(DH_KeyStr == 40)
                 {   
                     DH_Index ++;                  
                 }
                 //按下键盘的向上方向键
                 else if(DH_KeyStr==38)
                 {   
                     DH_Index --; 
                 }
                 if(DH_Index == 0)
                     DH_Index = DH_MaxIndex ;
                 if(DH_Index > DH_MaxIndex)
                     DH_Index = 1;                 
                 DH_DivTr.get(DH_Index).style.backgroundColor="#95B7F3";
                 
                 //控制滚动条
                 var div = DH_Div.get(0);
                 var tr = DH_DivTr.get(DH_Index);  
                 var scrollAreaMin = div.scrollTop;                
                 var scrollAreaMax = div.scrollTop + div.offsetHeight;
                 if(tr.offsetTop < scrollAreaMin )
                    div.scrollTop = tr.offsetTop;
                 if(tr.offsetTop + tr.offsetHeight > scrollAreaMax)
                    div.scrollTop = tr.offsetTop + tr.offsetHeight - div.offsetHeight;
                    
            }
        }
    }
}




     // 将返回的数据转换成table
     function  JsonToTable()
     {
        var str = "<table>"        
        str += "<tr>"; 
        var temp = new Array();     
        for(var i = 0;i < DH_Title.length ; i++)
        {
            if( DH_Title[i].IsShow == 1 )
            {
                str += "<td>" + DH_Title[i].Name + "</td>";
                temp.push(DH_Title[i].Field);
            }
        }
        str += "</tr>";
        for(var i = 0;i< DH_Date.length ; i++)
        {
            str += "<tr onclick=\"DH_click(" + (i + 1) + ")\" ondblclick=\"DH_dbclick(" + i + ")\" >";
            for(var j = 0;j < temp.length ; j++)
            {
                str += "<td>" + DH_Date[i][temp[j]] + "</td>";
            }
            str += "</tr>"
        }            
        str += "</table>";
        return str;
    }
     // 行单击
     function  DH_click(i)
     {
        DH_DivTr.css({"background-color": "" }); 
        DH_DivTr.get(i).style.backgroundColor="#95B7F3";
        DH_Index = i;
    }
     // 半双击
     function  DH_dbclick(i)
     {
        DH_Div.css("display","none");
        DH_CallBack(DH_Date[i]);
        DH_Index = -1 ;
    }
    
     //  get absolute Left position
     // 建立者:[email protected]
     // 返回对象位于窗口的绝对左边距离
     function  getAbsoluteLeft( ob ) {
     if(!ob){return null;}
       var obj = ob;
       var objLeft = obj .offsetLeft;
       while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
         objLeft += obj .offsetParent.offsetLeft;
         obj = obj .offsetParent;
       }
     return objLeft ;
    }
     //  get absolute TOP position
     // 建立者:[email protected]
     // 返回对象位于窗口的绝对上边距离
     function  getAbsoluteTop( ob ) {
     if(!ob){return null;}
     var obj = ob;
     var objTop = obj .offsetTop;
     while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
       objTop += obj .offsetParent.offsetTop;
       obj = obj .offsetParent;
     }
     return objTop ;
    }

前台调用页面 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 >
     < script  type ="text/javascript"  src ="jquery.js" ></ script >
     < script  type ="text/javascript"  src ="Snryang.js" ></ script >
     < script  type ="text/javascript" >
    
    function test(event,control)
    {          
        DH_Title = [{Field:"SupplierID",Name:"SupplierID",IsShow:0},
                    {Field:"CompanyName",Name:"CompanyName",IsShow:1},
                    {Field:"ContactName",Name:"ContactName",IsShow:1},
                    {Field:"ContactTitle",Name:"ContactTitle",IsShow:1},
                    {Field:"Address",Name:"Address",IsShow:1}
                   ];
        DH_Control = control;
        DH_PostObj = {Value:control.value};
        DH_KeyStr = event.keyCode;
        DH_CallBack = function(ren)
        {
            control.value = ren.CompanyName;
        }
        DH_Show();
    }    
     </ script >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < div >
         < a  style ="color:#FF0000;" ></ a > &nbsp; </ div >
         < div  style ="width: 393px; height: 100px;position:absolute; left: 224px; top: 119px;" >
             < asp:TextBox  ID ="TextBox1"  runat ="server"  onkeyup ="test(event,this)" ></ asp:TextBox >
         </ div >
     </ form >
</ body >
</ html >

后台获取数据文件 ajaxmethod.aspx.cs

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;
using  System.Data.SqlClient;
using  System.Data;


public   partial   class  AjaxMethod : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //获取数据页面
        SqlConnection conn = new SqlConnection("server=dh-db;database=Northwind;uid=sa;pwd=sa;");
        conn.Open();
        SqlDataAdapter dr = new SqlDataAdapter("SELECT top 30 * FROM dbo.Suppliers WHERE CompanyName like '" + Request.Form["Value"] + "%'", conn);
        DataSet dataset = new DataSet();
        dr.Fill(dataset);
        dr.Dispose();
        conn.Close();
        DataTable dt=dataset.Tables[0];

        Response.Write(TableToJson(dt));
    }

    private string TableToJson(DataTable dt)
    {
        if (dt == null)
            return "";

        string str = "var renObj =[ ";
        foreach (DataRow dr in dt.Rows)
        {
            str += "{";
            foreach (DataColumn dc in dt.Columns)
            {
                str += dc.ColumnName + ":" + toJsonStr(dr[dc].ToString()) + ",";
            }
            str = str.Substring(0, str.Length - 1);
            str += "},";
        }
        str = str.Substring(0, str.Length - 1);
        str += "];";

        return str;
    }

    private string toJsonStr(object obj)
    {
        string res = "";
        
        switch (obj.GetType().ToString())
        { 
            case  "System.String" :
                res =  "\""+obj.ToString()+ "\"";
                break;
            case  "System.Int" :
                break;
        }
        return res;
    }
}

示例下载：
/Files/snryang/WebSite1.rar