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

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


代码如下:

//建立跨浏览器的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";
}

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 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>

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