基于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
    //建立者:jiarry@hotmail.com
    //返回对象位于窗口的绝对左边距离
    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
    //建立者:jiarry@hotmail.com
    //返回对象位于窗口的绝对上边距离
    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=" 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