google suggest 下拉菜單實(shí)現(xiàn)代碼(asp.net版本)

//建立跨瀏覽器的xmlHttp對(duì)象引用 
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.'); 
} 
} 
//得到頁(yè)面使用的引用變量 
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前臺(tái)觸發(fā)函數(shù) 
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回調(diào)函數(shù) 
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;//重新從第一項(xiàng)開(kāi)始往下選擇 
setNames(names); 
} 
else if (xmlHttp.status == 204) 
{ 
clearNames(); 
} 
} 
} 
//彈出層位置確定函數(shù) 
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"; 
//獲取元素的絕對(duì)縱坐標(biāo) 
function getTop(e){ 
var offset=e.offsetTop; 
if(e.offsetParent!=null) offset+=getTop(e.offsetParent); 
return offset; 
} 
//獲取元素的橫坐標(biāo) 
function getLeft(e){ 
var offset=e.offsetLeft; 
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent); 
return offset; 
} 
//alert(inputWidth+"----"+inputwidth+"----"+inputtopleft+"----"+inputtop); 
} 
//將返回?cái)?shù)據(jù)添加到表格函數(shù) 
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); 
} 
} 
//點(diǎn)擊選中一條數(shù)據(jù)，添加到inputField 
function populateName(cell) { 
//填充數(shù)據(jù)到web頁(yè)面，cell---->td對(duì)象 
inputField.value = cell.firstChild.nodeValue; 
clearNames(); 
} 
//設(shè)置樣式 
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"; 
} 
} 
} 
//獲取鍵盤(pán)上下鍵 
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); 
} 
//清除列表數(shù)組 
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.前臺(tái)頁(yè)面 
 代碼如下:

<%@ 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>無(wú)標(biāo)題頁(yè)</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.后臺(tái)處理頁(yè)面 
 代碼如下:

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) 
{ 
//獲取你自己的數(shù)據(jù)庫(kù)連接連接。數(shù)據(jù)庫(kù)調(diào)用，采用了SqlHelper，要想使用下面代碼，下載SqlHelper到你自己定義文件夾，然后添加引用。否在請(qǐng)自行編寫(xiě)數(shù)據(jù)庫(kù)訪(fǎng)問(wèn)代碼。 
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(); 
} 
} 
} 

 
 




聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com