google suggest 下拉菜单(asp.net版本)

原来发表过，是asp版本的，但是不支持上下键，现在后台处理程序用.net写的。代码进行部分优化。

1.suggest.js 复制代码保存为suggest.js在你需要的页面引用就行了

//建立跨浏览器的xmlHttp对象引用
    var xmlHttp;
    var k=-1;

    var success;
    try
    {
      xmlHttp=new XMLHttpRequest();

      success= true;
    }
    catch(e)
    {
        var XMLHTTP_IDS = new Array('MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP' );
        var success = false;
        for(var i=0;i<XMLHTTP_IDS.length&&!success;i++)
        {
            try {
                xmlHttp = new ActiveXObject(XMLHTTP_IDS[i]);
                success = true;
             }

            catch (e) {

                success = false;
            }
        }
       
        if (!success) {
             throw new Error('Unable to create XMLHttpRequest.');
        }
    }
   
   //得到页面使用的引用变量
        function initVars() {
            inputField = document.getElementById("FrmChangshang");           
            nameTable = document.getElementById("name_table");
            completeDiv = document.getElementById("popup");
            nameTableBody = document.getElementById("name_table_body");
            document.getElementById("popup").style.display="block";
        }
   //ajax前台触发函数
    function findNames(event) {
          var keyc=(window.navigator.appName=="Microsoft Internet Explorer")?event.keyCode:event.which;
          if(keyc!=40 && keyc!=38)
          {
                if (inputField.value.length > 0)
               {
                 var url = "SearchCompany.aspx?cname=" + escape(inputField.value) +"&rnd="+Math.random().toString(); 
                 xmlHttp.open("GET", url, true);
                 xmlHttp.onreadystatechange = callback;
                 xmlHttp.send(null);
                }
               else
               {
                    clearNames();
                }
            }  
        }
   //ajax回调函数
     function callback()
      {
            var names;
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200)
                {
     try
                    {
                        names=xmlHttp.responseXML.getElementsByTagName("name");
                    }
                    catch(e)
                    {
                        completeDiv.style.display="none";
                        clearNames();
                    }
                    k=-1;//重新从第一项开始往下选择
                    setNames(names);
                }
                else if (xmlHttp.status == 204)
                {
                    clearNames();
                }
            }
        }     
     //弹出层位置确定函数
     function divsOffset()
     {
          var inputWidth=inputField.offsetWidth;
          var inputHeight=inputField.offsetHeight;
          var inputTop=inputField.offsetTop;
          var inputLeft=inputField.offsetLeft;
          nameTable.style.width=inputWidth+"px";
          completeDiv.style.width=inputWidth+"px";
          completeDiv.style.top=(getTop(inputField)+inputHeight)+"px";
          completeDiv.style.left=getLeft(inputField)+"px";
          completeDiv.style.border = "#817f82 1px solid";
          completeDiv.style.position = "absolute";
          //获取元素的绝对纵坐标
          function getTop(e){
            var offset=e.offsetTop;
            if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
            return offset;
            }
        //获取元素的横坐标
          function getLeft(e){
            var offset=e.offsetLeft;
            if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
            return offset;
            }

          //alert(inputWidth+"----"+inputwidth+"----"+inputtopleft+"----"+inputtop);
     }
    //将返回数据添加到表格函数
    function setNames(the_names) {
        clearNames();
        divsOffset();
        for(var i=0;i<the_names.length;i++)
        {
           var nextNode=the_names[i].firstChild.nodeValue;
           var row  =document.createElement("tr");
           var cell =document.createElement("td");
           cell.onmouseout = function() {this.className="mouseOut";};
           cell.onmouseover =(function(tdi) {return function(){k=tdi;setStyle(k);}})(i);
           cell.setAttribute("bgcolor","#FFFAFA");
           cell.setAttribute("border","0");
           cell.setAttribute("style","font-size:15px");
           cell.onclick = function() { populateName(this); };
     //将nextNode添加到td
     var txtName = document.createTextNode(nextNode);
     cell.appendChild(txtName);
     row.appendChild(cell);
           nameTableBody.appendChild(row);
        }
    } 
    //点击选中一条数据，添加到inputField
    function populateName(cell) {
          //填充数据到web页面，cell---->td对象  
          inputField.value = cell.firstChild.nodeValue;
          clearNames();
    }
   //设置样式
   function setStyle(num)
    {
       var tBody = nameTableBody.getElementsByTagName("td");
       for(var i=0;i<tBody.length;i++)
        {  
           if(i>=0 && i<tBody.length&&i==num)
           {
                tBody[i].className="mouseOver"; 
           }
           else
           {
                tBody[i].className="mouseOut";
           }
        }
     }
  //获取键盘上下键
  function updown(e)
  {
      var tBody = nameTableBody.getElementsByTagName("td");
      var keyc=(window.navigator.appName=="Microsoft Internet Explorer")?e.keyCode:e.which;
        if(tBody==null)
            return;
        if(keyc==40)
         {
            k++;
            if(k>=tBody.length)
            {
              k=0;
            }
            inputField.value=tBody[k].firstChild.nodeValue; 
         }
        else if(keyc==38)
         {
            k--;
            if(k<=-1)
            {
              k=tBody.length-1;
            }    
             inputField.value=tBody[k].firstChild.nodeValue;       
          }
          setStyle(k);      
 }

  //清除列表数组
  function clearNames() {
        var ind = nameTableBody.childNodes.length;
        var completeDiv = document.getElementById("popup");
        for (var i = ind - 1; i >= 0 ; i--) {
             nameTableBody.removeChild(nameTableBody.childNodes[i]);
        }
        completeDiv.style.border = "none";
    }

 

2.前台页面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="searchcom.aspx.cs" Inherits="member_searchcom" %>

<!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">
<style type="text/css">
<!--
.mouseOut
{
 font-size:15px;
 background: #ffffff;
 color: #000000;
}

.mouseOver
{
 font-size:15px;
 background: #3366cc;
 color: #ffffff;
 cursor: pointer;
}
-->
</style>
    <title>无标题页</title>
<script language="javascript" src="../js/suggest.js" type="text/javascript"></script>
</head>
<body οnlοad="initVars();">
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                </td>
                <td>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td >
                </td>
                <td>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                </td>
                <td><input id="FrmChangshang" name="FrmChangshang" type="text" style="width: 320px;" maxlength="20" οnkeyup="findNames(event);" οnkeydοwn="updown(event);" οnclick="findNames(event);"/>
        <div id="popup">
            <table id="name_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="3px">           
                <tbody id="name_table_body"></tbody>
            </table>
        </div>
                </td>
            </tr>
        </table>
        <br />
        <br />
        <br />

    </div>
    </form>
</body>
</html>

 

3.后台处理页面

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 CaiHong.DBUtility;
public partial class member_SearchCompany : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
       //获取你自己的数据库连接连接。数据库调用，采用了SqlHelper，要想使用下面代码，下载SqlHelper到你自己定义文件夹，然后添加引用。否在请自行编写数据库访问代码。

        string strconn = ConfigurationManager.ConnectionStrings["DBConn"].ConnectionString;
        string keyword = Request.QueryString["cname"];
        string sql = "select Member_TrueName from users where Member_TrueName like '%" + @keyword + "%' and Member_ShenFen=1 order by id desc";
        SqlParameter spr = new SqlParameter("@keyword", SqlDbType.NVarChar, 50);
        spr.Value = keyword;
        Response.ContentType = "text/xml";
        Response.Write("<?xml version=/"1.0/" encoding=/"GB2312/"?>");
        Response.Write("<response>");
        using (SqlConnection sqlconn = new SqlConnection(strconn))
        {
            sqlconn.Open();
            SqlDataReader dre = SqlHelper.ExecuteReader(sqlconn, CommandType.Text, sql);

            if (dre.HasRows)
            {
                while (dre.Read())
                {
                    Response.Write("<content>");
                    Response.Write("<name>" + dre.GetString(0) + "</name>");
                    Response.Write("</content>");
                }
            }
            else
            {
                Response.Write("<content>");
                Response.Write("<name>IsKong</name>");
                Response.Write("</content>");
            }
            Response.Write("</response>");
            dre.Close();
        }
    }
}