google suggest 下拉菜单实现代码(asp.net版本)

　　//建立跨浏览器的xmlHttp对象引用

　　var xmlHttp;

　　var k=-1;

　　try

　　{

　　xmlHttp=new XMLHttpRequest();

　　}

　　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) {}

　　}

　　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:e.which;

　　if(keyc!=40 && keyc!=38)

　　{

　　if (inputField.value.length > 0)

　　{

　　var url = "SearchCompany.aspx?cname=" + 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")?event.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";

　　}

　　<%@ 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 onload="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" onkeyup="findNames(event);" onkeydown="updown(event);" onclick="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>

　　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();

　　}

　　}

　　}