最简做了个实现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)
//
获取当前操作坐标
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
var top = 0,left = 0;
do
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
top += obj.offsetTop;
left += obj.offsetLeft;
}
while ( obj = obj.offsetParent );
var arr = new Array();
arr[0] = top;
arr[1] = left;
return arr;
}
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
function
createMenu(result)
//
生成div
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
var textBox=document.getElementById("inputer");
var menuid="divout";
var divouter;
if( document.getElementById(menuid) == null )
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
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";
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
try...{
newControl.style.font=12+"px";}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
catch(err)...{}
divouter= newControl;
}
else
divouter= document.getElementById( menuid );
divouter.innerHTML =result;
}
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
function
createMenuBody(resultlist)
//
根据返回数组生成div中行
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
var result="";
var j = 0;
arr = resultlist;
arrylist =arr;
if(arr.length > 10)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
j = 10;
}
else
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
j = arr.length;
}
resultlength=j;
if(j-1 >0)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
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
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
var div = document.getElementById("divout");
if(div)
div.parentNode.removeChild(div);
}
}
function
forceMenuItem(index)
//
div中颜色变化
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
lastMenuItem = document.getElementById("menuItem" + menuFocusIndex);
if (lastMenuItem != null)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
lastMenuItem.style.backgroundColor="white";
lastMenuItem.style.color="#000000";
}
var menuItem = document.getElementById("menuItem" + index);
if (menuItem == null)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
document.getElementById("txt1").focus();
}
else
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
menuItem.style.backgroundColor = "#5555CC";
menuItem.style.color = "#FFFFFF";
menuFocusIndex = index;
}
}
function
givNumber(index)
//
鼠标事件对应文本框赋值
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
document.getElementById("inputer").value = arrylist[index];
document.getElementById("inputer").focus();
var div = document.getElementById("divout");
div.parentNode.removeChild(div);
}
function
givNumberbykey(index)
//
按键事件对应文本框赋值
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
document.getElementById("inputer").value = arrylist[index];
document.getElementById("inputer").focus();
//var div = document.getElementById("divout");
//div.parentNode.removeChild(div);
}
function
catchKeyBoard()
//
按键事件
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
var keyNumber = event.keyCode;
if(keyNumber=='40') //向下
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if (menuFocusIndex==null) //当焦点在文本框中间时,按向下跳到第一个主体。
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
forceMenuItem(1);
givNumberbykey(0);
}
else if(menuFocusIndex==resultlength-1)//当焦点超出界限时跳转到第一个主体
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
forceMenuItem(1);
givNumberbykey(0);
}
else
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
forceMenuItem(menuFocusIndex+1); //焦点增加1
givNumberbykey(menuFocusIndex-1);
}
}
else if(keyNumber=='38')//向上
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if(menuFocusIndex==1)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
forceMenuItem(resultlength-1);
givNumberbykey(resultlength-2);
// forceMenuItem(menuFocusIndex-1); //当焦点在第一个主体时,按向上让它回到文本框。
}
else
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
forceMenuItem(menuFocusIndex-1); //焦点减少1
givNumberbykey(menuFocusIndex-1);
}
}
else if(keyNumber=='13')
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
givNumber(menuFocusIndex-1);
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
function
DisplayUserInformation()
//
ajax方法调用
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
var keyNumber = event.keyCode;
if(keyNumber=='40'||keyNumber=='38'||keyNumber=='13')
catchKeyBoard();
else
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
var url = "";
var canshu=document.getElementById("inputer").value;
if(canshu!="")
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
url = '../WebForm9.aspx?qs='+canshu;
Ajax.Request(url,pareseResultText,null,null,'text',null,'' );
}
else
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
var div = document.getElementById("divout");
if(div)
div.parentNode.removeChild(div);
}
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
function
pareseResultText()
//
ajax方法获取
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
var result = this.req.responseText;
if(result)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
eval(result);
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
function
CreateUserInfo(objResult)
//
ajax方法数组接收
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
if(objResult)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
var result = new Array();
for(var obj in objResult)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
result = objResult[obj].split('~');
createMenuBody(result);
}
}
}
2 公用js的ajax对象,由上一部分代码调用
//
//
公用Ajax请求对象
//
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
var
Ajax
=
...
{
LoadContent:function(url,onload,onerror,sendData,dataType,requestType,callBackGuid)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
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;
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
this.LoadXml(url);
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
},
Request:
function(url,onLoad,onError,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
sendData,dataType,requestType,callBackGuid)...{
new Ajax.LoadContent(url,onLoad,onError,sendData,dataType,requestType,callBackGuid);
},
ProcSubmit :
function(url,fromId,onCallBack,onError,callBackGuid)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
var obj=$(fromId);
var str="";
for(i=0;i<obj.elements.length;i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
e=obj.elements[i];
if(e.type=="text"
||e.type=="hidden"
||e.type=="textarea"
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
||e.type=="password")...{
str+="&"+e.name+"="+escape(e.value);
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}else if(e.type=="radio")...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(e.checked)...{
str+="&"+e.name+"="+escape(e.value);
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}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);
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
//
//
自定义内容属性
//
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
Ajax.LoadContent.prototype
=
...
{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
LoadXml:function(url)...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(window.ActiveXObject)...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
for(var i in this.XmlHttpType)...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
try...{
this.req = new ActiveXObject(this.XmlHttpType[i]);break;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}catch(e)...{
continue;
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}else if(window.XMLHttpRequest)...{
this.req = new XMLHttpRequest();
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(this.req)...{
var tempLoad = this;
this.req.overrideMimeType?this.req.overrideMimeType("text/xml"):null;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
this.req.onreadystatechange =function()...{
tempLoad.ReadyStateChange.call(tempLoad);
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(this.sendData)...{
this.req.open("POST",this.url,true);
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(this.requestType && this.requestType.toLowerCase()=="xml")...{
this.req.setRequestHeader("Content-Type","text/xml; charset=gb2312");
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
else...{
this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}else...{
this.req.open("GET",this.url+'&xmlRequest=cmd',true);//temp add cmd
}
if(this.requestType
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
&&this.requestType.toLowerCase()=="xml")...{
this.req.send(this.sendData);
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
else...{
this.req.send(this.sendData);
}
}
},
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
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"
},
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
ReadyStateChange:function()...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(this.req.readyState == 4)...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(this.req.status == 200 || this.req.status == 0)...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(this.dataType.toLowerCase()=="xml")...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}else...{
}
this.onload.call(this,this.callBackGuid);
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}else...{
this.onerror.call(this);
}
}
},
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
GetLoadData:function()...{
return this.data;
},
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
defaultError:function()...{
alert('error .. ResponseHeads='+this.req.getAllResponseHeaders());
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
Ajax.pro
=
function
()
...
{alert('f');}
3 页面中事件引发按钮
<
input
id
="inputer"
type
="text"
onkeyup
= "DisplayUserInformation()"
style
="width: 158px; height: 20px"
/>
4 后台代码逻辑处理,返回str字符串
private
void
inidata()
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
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++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if (dt.Rows[i]["学生班级"].ToString().StartsWith(requeststring))
str += dt.Rows[i]["学生班级"] + "~";
}
str += "'})";
EndResponse(str);
}
private
void
EndResponse(
string
val)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
Response.Clear();
Response.Write(val);
Response.Flush();
Response.End();
}
至此google的下拉功能大致实现,至于后台搜索关键字的方法当然是随便写的。