最简做了个实现google下拉效果的程序,这样的程序网上挺多,但是代码不少,需要慢慢看。这里贴一下我的,这个代码借鉴 http://www.cnblogs.com/ustbwuyi/archive/2006/07/17/452700.aspx的博客的代码,做了一下必要的修改。
1 js代码,这个代码主要是对于下拉列表的生成和操作,以及调用ajax接口
var
menuFocusIndex;
//
当前选中行
var arrylist; // 当前返回数组
var resultlength = 0 ; // 当前数组长度
function getPosition(obj) // 获取当前操作坐标
... {
var top = 0,left = 0;
do
...{
top += obj.offsetTop;
left += obj.offsetLeft;
}
while ( obj = obj.offsetParent );
var arr = new Array();
arr[0] = top;
arr[1] = left;
return arr;
}
function createMenu(result) // 生成div
... {
var textBox=document.getElementById("inputer");
var menuid="divout";
var divouter;
if( document.getElementById(menuid) == null )
...{
var left_new=getPosition(textBox)[1];
var top_new=getPosition(textBox)[0];
var newControl = document.createElement("div");
newControl.id = menuid;
document.body.appendChild(newControl);
newControl.style.position = "absolute";
newControl.style.border = "solid 1px #0000ee";
newControl.style.backgroundColor = "#FFFFFF";
newControl.style.width = 158 + "px";
newControl.style.left = left_new + "px";
newControl.style.top = top_new+ 2 +20+ "px";
try...{
newControl.style.font=12+"px";}
catch(err)...{}
divouter= newControl;
}
else
divouter= document.getElementById( menuid );
divouter.innerHTML =result;
}
function createMenuBody(resultlist) // 根据返回数组生成div中行
... {
var result="";
var j = 0;
arr = resultlist;
arrylist =arr;
if(arr.length > 10)
...{
j = 10;
}
else
...{
j = arr.length;
}
resultlength=j;
if(j-1 >0)
...{
for ( var i = 0; i < j-1; i++ )
result += "<table border="0" cellpadding="2" cellspacing="0" id="menuItem"+(i+1)+"" οnmοuseοver="forceMenuItem( "+(i+1)+");" width="100%" οnclick="givNumber("+i+")"><tr><td align="left">" + arr[i] + "</td><td align="right">" + (i+1) + " </td></tr></table>";
createMenu(result);
}
else
...{
var div = document.getElementById("divout");
if(div)
div.parentNode.removeChild(div);
}
}
function forceMenuItem(index) // div中颜色变化
... {
lastMenuItem = document.getElementById("menuItem" + menuFocusIndex);
if (lastMenuItem != null)
...{
lastMenuItem.style.backgroundColor="white";
lastMenuItem.style.color="#000000";
}
var menuItem = document.getElementById("menuItem" + index);
if (menuItem == null)
...{
document.getElementById("txt1").focus();
}
else
...{
menuItem.style.backgroundColor = "#5555CC";
menuItem.style.color = "#FFFFFF";
menuFocusIndex = index;
}
}
function givNumber(index) // 鼠标事件对应文本框赋值
... {
document.getElementById("inputer").value = arrylist[index];
document.getElementById("inputer").focus();
var div = document.getElementById("divout");
div.parentNode.removeChild(div);
}
function givNumberbykey(index) // 按键事件对应文本框赋值
... {
document.getElementById("inputer").value = arrylist[index];
document.getElementById("inputer").focus();
//var div = document.getElementById("divout");
//div.parentNode.removeChild(div);
}
function catchKeyBoard() // 按键事件
... {
var keyNumber = event.keyCode;
if(keyNumber=='40') //向下
...{
if (menuFocusIndex==null) //当焦点在文本框中间时,按向下跳到第一个主体。
...{
forceMenuItem(1);
givNumberbykey(0);
}
else if(menuFocusIndex==resultlength-1)//当焦点超出界限时跳转到第一个主体
...{
forceMenuItem(1);
givNumberbykey(0);
}
else
...{
forceMenuItem(menuFocusIndex+1); //焦点增加1
givNumberbykey(menuFocusIndex-1);
}
}
else if(keyNumber=='38')//向上
...{
if(menuFocusIndex==1)
...{
forceMenuItem(resultlength-1);
givNumberbykey(resultlength-2);
// forceMenuItem(menuFocusIndex-1); //当焦点在第一个主体时,按向上让它回到文本框。
}
else
...{
forceMenuItem(menuFocusIndex-1); //焦点减少1
givNumberbykey(menuFocusIndex-1);
}
}
else if(keyNumber=='13')
...{
givNumber(menuFocusIndex-1);
}
}
function DisplayUserInformation() // ajax方法调用
... {
var keyNumber = event.keyCode;
if(keyNumber=='40'||keyNumber=='38'||keyNumber=='13')
catchKeyBoard();
else
...{
var url = "";
var canshu=document.getElementById("inputer").value;
if(canshu!="")
...{
url = '../WebForm9.aspx?qs='+canshu;
Ajax.Request(url,pareseResultText,null,null,'text',null,'' );
}
else
...{
var div = document.getElementById("divout");
if(div)
div.parentNode.removeChild(div);
}
}
}
function pareseResultText() // ajax方法获取
... {
var result = this.req.responseText;
if(result)
...{
eval(result);
}
}
function CreateUserInfo(objResult) // ajax方法数组接收
... {
if(objResult)
...{
var result = new Array();
for(var obj in objResult)
...{
result = objResult[obj].split('~');
createMenuBody(result);
}
}
}
var arrylist; // 当前返回数组
var resultlength = 0 ; // 当前数组长度
function getPosition(obj) // 获取当前操作坐标
... {
var top = 0,left = 0;
do
...{
top += obj.offsetTop;
left += obj.offsetLeft;
}
while ( obj = obj.offsetParent );
var arr = new Array();
arr[0] = top;
arr[1] = left;
return arr;
}
function createMenu(result) // 生成div
... {
var textBox=document.getElementById("inputer");
var menuid="divout";
var divouter;
if( document.getElementById(menuid) == null )
...{
var left_new=getPosition(textBox)[1];
var top_new=getPosition(textBox)[0];
var newControl = document.createElement("div");
newControl.id = menuid;
document.body.appendChild(newControl);
newControl.style.position = "absolute";
newControl.style.border = "solid 1px #0000ee";
newControl.style.backgroundColor = "#FFFFFF";
newControl.style.width = 158 + "px";
newControl.style.left = left_new + "px";
newControl.style.top = top_new+ 2 +20+ "px";
try...{
newControl.style.font=12+"px";}
catch(err)...{}
divouter= newControl;
}
else
divouter= document.getElementById( menuid );
divouter.innerHTML =result;
}
function createMenuBody(resultlist) // 根据返回数组生成div中行
... {
var result="";
var j = 0;
arr = resultlist;
arrylist =arr;
if(arr.length > 10)
...{
j = 10;
}
else
...{
j = arr.length;
}
resultlength=j;
if(j-1 >0)
...{
for ( var i = 0; i < j-1; i++ )
result += "<table border="0" cellpadding="2" cellspacing="0" id="menuItem"+(i+1)+"" οnmοuseοver="forceMenuItem( "+(i+1)+");" width="100%" οnclick="givNumber("+i+")"><tr><td align="left">" + arr[i] + "</td><td align="right">" + (i+1) + " </td></tr></table>";
createMenu(result);
}
else
...{
var div = document.getElementById("divout");
if(div)
div.parentNode.removeChild(div);
}
}
function forceMenuItem(index) // div中颜色变化
... {
lastMenuItem = document.getElementById("menuItem" + menuFocusIndex);
if (lastMenuItem != null)
...{
lastMenuItem.style.backgroundColor="white";
lastMenuItem.style.color="#000000";
}
var menuItem = document.getElementById("menuItem" + index);
if (menuItem == null)
...{
document.getElementById("txt1").focus();
}
else
...{
menuItem.style.backgroundColor = "#5555CC";
menuItem.style.color = "#FFFFFF";
menuFocusIndex = index;
}
}
function givNumber(index) // 鼠标事件对应文本框赋值
... {
document.getElementById("inputer").value = arrylist[index];
document.getElementById("inputer").focus();
var div = document.getElementById("divout");
div.parentNode.removeChild(div);
}
function givNumberbykey(index) // 按键事件对应文本框赋值
... {
document.getElementById("inputer").value = arrylist[index];
document.getElementById("inputer").focus();
//var div = document.getElementById("divout");
//div.parentNode.removeChild(div);
}
function catchKeyBoard() // 按键事件
... {
var keyNumber = event.keyCode;
if(keyNumber=='40') //向下
...{
if (menuFocusIndex==null) //当焦点在文本框中间时,按向下跳到第一个主体。
...{
forceMenuItem(1);
givNumberbykey(0);
}
else if(menuFocusIndex==resultlength-1)//当焦点超出界限时跳转到第一个主体
...{
forceMenuItem(1);
givNumberbykey(0);
}
else
...{
forceMenuItem(menuFocusIndex+1); //焦点增加1
givNumberbykey(menuFocusIndex-1);
}
}
else if(keyNumber=='38')//向上
...{
if(menuFocusIndex==1)
...{
forceMenuItem(resultlength-1);
givNumberbykey(resultlength-2);
// forceMenuItem(menuFocusIndex-1); //当焦点在第一个主体时,按向上让它回到文本框。
}
else
...{
forceMenuItem(menuFocusIndex-1); //焦点减少1
givNumberbykey(menuFocusIndex-1);
}
}
else if(keyNumber=='13')
...{
givNumber(menuFocusIndex-1);
}
}
function DisplayUserInformation() // ajax方法调用
... {
var keyNumber = event.keyCode;
if(keyNumber=='40'||keyNumber=='38'||keyNumber=='13')
catchKeyBoard();
else
...{
var url = "";
var canshu=document.getElementById("inputer").value;
if(canshu!="")
...{
url = '../WebForm9.aspx?qs='+canshu;
Ajax.Request(url,pareseResultText,null,null,'text',null,'' );
}
else
...{
var div = document.getElementById("divout");
if(div)
div.parentNode.removeChild(div);
}
}
}
function pareseResultText() // ajax方法获取
... {
var result = this.req.responseText;
if(result)
...{
eval(result);
}
}
function CreateUserInfo(objResult) // ajax方法数组接收
... {
if(objResult)
...{
var result = new Array();
for(var obj in objResult)
...{
result = objResult[obj].split('~');
createMenuBody(result);
}
}
}
2 公用js的ajax对象,由上一部分代码调用
//
// 公用Ajax请求对象
//
var Ajax = ... {
LoadContent:function(url,onload,onerror,sendData,dataType,requestType,callBackGuid)
...{
this.url = url;
this.req = null;
this.data;
this.onload = onload ;
this.onerror = onerror?onerror:this.defaultError;
this.sendData = sendData;
this.dataType =dataType || "xml";
this.requestType = requestType;
this.callBackGuid = callBackGuid;
this.LoadXml(url);
},
Request:
function(url,onLoad,onError,
sendData,dataType,requestType,callBackGuid)...{
new Ajax.LoadContent(url,onLoad,onError,sendData,dataType,requestType,callBackGuid);
},
ProcSubmit :
function(url,fromId,onCallBack,onError,callBackGuid)
...{
var obj=$(fromId);
var str="";
for(i=0;i<obj.elements.length;i++)
...{
e=obj.elements[i];
if(e.type=="text"
||e.type=="hidden"
||e.type=="textarea"
||e.type=="password")...{
str+="&"+e.name+"="+escape(e.value);
}else if(e.type=="radio")...{
if(e.checked)...{
str+="&"+e.name+"="+escape(e.value);
}
}else if(e.type=="select-one")...{
str+="&"+e.id+"Id="+escape(e.options[e.selectedIndex].value);
str+="&"+e.id+"Name="+escape(e.options[e.selectedIndex].text);
}
}
str=str.replace(str.substring(0,1),"");
Ajax.Request(url,onCallBack,onError,str,'text',null,callBackGuid);
}
}
//
// 自定义内容属性
//
Ajax.LoadContent.prototype = ... {
LoadXml:function(url)...{
if(window.ActiveXObject)...{
for(var i in this.XmlHttpType)...{
try...{
this.req = new ActiveXObject(this.XmlHttpType[i]);break;
}catch(e)...{
continue;
}
}
}else if(window.XMLHttpRequest)...{
this.req = new XMLHttpRequest();
}
if(this.req)...{
var tempLoad = this;
this.req.overrideMimeType?this.req.overrideMimeType("text/xml"):null;
this.req.onreadystatechange =function()...{
tempLoad.ReadyStateChange.call(tempLoad);
}
if(this.sendData)...{
this.req.open("POST",this.url,true);
if(this.requestType && this.requestType.toLowerCase()=="xml")...{
this.req.setRequestHeader("Content-Type","text/xml; charset=gb2312");
}
else...{
this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
}else...{
this.req.open("GET",this.url+'&xmlRequest=cmd',true);//temp add cmd
}
if(this.requestType
&&this.requestType.toLowerCase()=="xml")...{
this.req.send(this.sendData);
}
else...{
this.req.send(this.sendData);
}
}
},
XmlHttpType:...{
msxml2:"MSXML2.XMLHTTP",
msxml2_5:"MSXML2.XMLHTTP.5.0",
msxml2_3:"MSXML2.XMLHTTP.3.0",
msxml2_4:"MSXML2.XMLHTTP.4.0",
micxmlhttp:"Microsoft.XMLHTTP"
},
ReadyStateChange:function()...{
if(this.req.readyState == 4)...{
if(this.req.status == 200 || this.req.status == 0)...{
if(this.dataType.toLowerCase()=="xml")...{
}else...{
}
this.onload.call(this,this.callBackGuid);
}else...{
this.onerror.call(this);
}
}
},
GetLoadData:function()...{
return this.data;
},
defaultError:function()...{
alert('error .. ResponseHeads='+this.req.getAllResponseHeaders());
}
}
Ajax.pro = function () ... {alert('f');}
3 页面中事件引发按钮
<
input
id
="inputer"
type
="text"
onkeyup
= "DisplayUserInformation()"
style
="width: 158px; height: 20px"
/>
4 后台代码逻辑处理,返回str字符串
private
void
inidata()
... {
string requeststring = Request.QueryString["qs"].Trim().Replace(" ","").Replace(" ","");
string str = string.Empty;
DataTable dt = Class1.getdataview();
str = "CreateUserInfo({12:'";
for (int i = 0; i < dt.Rows.Count; i++)
...{
if (dt.Rows[i]["学生班级"].ToString().StartsWith(requeststring))
str += dt.Rows[i]["学生班级"] + "~";
}
str += "'})";
EndResponse(str);
}
private void EndResponse( string val)
... {
Response.Clear();
Response.Write(val);
Response.Flush();
Response.End();
}
... {
string requeststring = Request.QueryString["qs"].Trim().Replace(" ","").Replace(" ","");
string str = string.Empty;
DataTable dt = Class1.getdataview();
str = "CreateUserInfo({12:'";
for (int i = 0; i < dt.Rows.Count; i++)
...{
if (dt.Rows[i]["学生班级"].ToString().StartsWith(requeststring))
str += dt.Rows[i]["学生班级"] + "~";
}
str += "'})";
EndResponse(str);
}
private void EndResponse( string val)
... {
Response.Clear();
Response.Write(val);
Response.Flush();
Response.End();
}
至此google的下拉功能大致实现,至于后台搜索关键字的方法当然是随便写的。