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