我想模擬google自動完成功能 基本的功能實現了,現在我想添加鍵盤按鈕事件,用鍵盤的上下按鈕控制,求高手续写?前台
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="EtsBBS_Default2" %><!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="js/jquery-1.4.2.js"></script>    <script type="text/javascript">
  $(document).ready(function(){
   $("#searchTxt").keyup(function(event){   
      $("#divShow").remove();  //清空上次div裏面的內容
      var  searchTxt=$("#searchTxt").val();//獲取文本框的值
      var divLeft=$(this).offset().left;   
      var divTop=$(this).offset().top+22;
      var htmlDiv="<div id='divShow'  style='display:none;left:"+divLeft+"px;top:"+divTop+"px;position:absolute;width:153px;z-index:1000;border:1px solid #558BE3;overflow:hidden'></div>"
      $.ajax({
       type:"POST",
       url:"DataBase.aspx?keys="+encodeURIComponent(searchTxt)+"&Event=strs",
       data:null,
       success:function(mes)
        {
         if(mes=="")
           {
            $("#divShow").hide();//當mes的值為空時就不彈出div
           }
         else
         {
          $(document.body).append(htmlDiv);
          $("#divShow").show();
          $("#divShow").append(mes); 
          //給彈出到層加上效果
          $("#divShow").find(".cl").each(function()
          {
               $(this).mouseover(function(){$(this).css("background-color","#C6D6F0").siblings().css("background-color","");})
                    .click(function(){$("#searchTxt").val( $(this).html());});///層裏面的值付給文本框
          });
         
         }   
        }//success end;
       });//ajax  
     })//keyup end
  }) 
 
 //鼠標點擊其他地方隱藏彈出的層
 document.onclick=function(e){
        var e=e?e:window.event;
        var tar = e.srcElement||e.target;
        if(tar.tagName.toLowerCase()!="searchTxt"&&tar.tagName.toLowerCase()!="divShow"){
         $("#divShow").css("display","none")
        }
}
    </script></head>
<body>
    <form id="form1" runat="server">
        <div>
            <input type="text" id="searchTxt" />
        </div>
    </form>
</body>
</html>
处理页面
  protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.QueryString["Event"] == "strs")
        {
            string userName = string.Empty;
            string searchText = Request.QueryString["keys"];
            if (searchText != "")
            {
                string sql = "select user_name from mdsets_bbs_users where user_name like '" + searchText + "%'";
                StringBuilder sb = new StringBuilder();
                OleDbDataReader reader = OracleHelper.ExecuteReader(OracleHelper.ConnString, CommandType.Text, sql, null);
                string divId = "d";
                while (reader.Read())
                {
                    sb.Append("<div class='cl' id=" + divid + ">" + reader["user_name"] + "</div>");
                }
                Response.Write(sb);
                reader.Close();            }
        }
 }