本文转自：http://blog.csdn.net/lolenboy/article/details/1665814
说明： 环境：ASPNET（c#），SQL2K 事例：TEXTBOX下跟随DIV，在TEXTBOX中输入内容，DIV上就显示出相应的查询结果[AJAX]，类似于股票输入查询。 页面：一个显示页面（FilialeList）；一个后台处理中间文件，一个数据库操作文件，JS操作文件。 显示页面FilialeList： 关键代码 ： 调用JS文件 <script language="javascript" src="../JScript/PubJSFunction.js" type="text/javascript"></script> //当DIV显示后，点击页面其他地方，DIV隐藏。 <body style="margin: 0px" onclick="f_blur()"> //输入的代码框和相应的DIV的HTML，注意中间文件（PubGetTxtCode.aspx'）路径 <td> 编码：<asp:TextBox ID="txt_Code" runat="server" Width="110px" CssClass="input1" onkeyup="f_KeyUp('txt_Code','filiale','../Pub/PubGetTxtCode.aspx')"></asp:TextBox> <div id="divOrders" class="div_Code" style="display: none;"> </div> </td> //隐藏对象记录要隐藏哪个DIV的ID（假如页面有好几个输入框和好几个对应的DIV，本例子是页面只有1个输入框和1个DIV） <input id="hid_DivID" type="hidden" /> 中间文件（PubGetTxtCode.aspx）： protected void Page_Load(object sender, EventArgs e) { DataTable dtNew = new DataTable(); Common.PubGetTxtCode valueObj = new Common.PubGetTxtCode(); int li_Return = 0; string ls_ErrText = ""; string mystr = ""; string funName = ""; if (!this.IsPostBack) { string Type = Request["Type"].Trim().ToString(); string Code = Request["ls_Code"].Trim().ToString(); # region Swithch(type) switch (Type) { #region 基础资料 case "filiale": mystr = "编码" + "||||" + "名称"; li_Return = valueObj.GetFiliales(Code, dtNew, ref ls_ErrText); break; .... } if(li_Return>0) { for (int i = 0; i < dtNew.Rows.Count; i++) { mystr += ",,,," + dtNew.Rows[i][0].ToString() + "||||" + dtNew.Rows[i][1].ToString(); } } this.Response.Write(mystr); this.Response.End(); } //数据库操作文件：（获取10条记录） public int GetFiliales(string Code, DataTable dt, ref string ErrText) { string ls_Sql; int ErrCode; try { ls_Sql = "select Top 10 FilialeID,FilialeName from Filiales where FilialeID LIKE '" + Code + "%' AND Status='1'"; ErrCode = _cmd.GetData(ls_Sql, dt); ErrText = ""; } catch (System.Exception e) { ErrCode = -1900110; ErrText = e.Message.ToString(); } return ErrCode; } //JS文件： //焦点控制 function f_blur() { var divID = document.all("hid_DivID").value; if(document.all("hid_DivID").value!="") { document.getElementById(divID).style.display="none"; } } //获取编码放到TextBox里 function f_GetCode(txtID,value) { document.all(txtID).value = value; document.getElementById("divOrders").style.display="none"; } //生成DIV内容的HTML function f_KeyUp(txtID,type,src) { document.all("hid_DivID").value="divOrders"; document.all("divOrders").innerHTML = ""; var ls_Code = document.all(txtID).value; ls_Code=ls_Code.replace(/ +/, ""); ls_Code=ls_Code.replace(/ +$/,""); if(ls_Code == "") { document.getElementById("divOrders").style.display="none"; return; } else { var webFileUrl = src+"?s="+Math.random()+"&Type="+type+"&ls_Code="+ls_Code; var result = ""; var xmlHttp = new ActiveXObject("MSXML2.XMLHTTP"); xmlHttp.open("POST", webFileUrl, false); xmlHttp.send(""); result = xmlHttp.responseText; if(result != "") { document.getElementById("divOrders").style.display=""; var piArray = result.split(",,,,"); if(piArray.length==1) { document.all("divOrders").style.display="none"; return; } var html ="<Table border='0' width='100%' align='center' cellpadding='2' cellspacing='2'>"; for(var i=0;i<piArray.length;i++) { var ary1 = piArray[i].toString().split("||||"); if (i==0) { html+="<Tr style=/"background-color:#CDD0D3 ;/">"; } else { html+="<Tr style=/"background-color:#CDD0D3 ;/" onmouseover=/"c=this.style.backgroundColor;this.style.backgroundColor='#A7A9AC';/" onmouseout=/"this.style.backgroundColor=c;/" onclick=/"f_GetCode('"+txtID+"','"+ary1[0]+"')/">"; } if(i==0) { html+="<td width=/"40%/">"; html+=ary1[0]; html+="</td>"; html+="<td width=/"60%/">"; html+=ary1[1]; html+="</td>"; html+="</Tr>"; } else { html+="<td>"; html+=ary1[0]; html+="</td>"; html+="<td>"; html+=ary1[1]; html+="</td>"; html+="</Tr>"; } } html+="</Table>"; html+="<iframe src=/"javascript:false/" style=/"Z-INDEX:-1;POSITION:absolute; FILTER:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0); VISIBILITY:inherit;TOP:0px;WIDTH:100%;HEIGHT:100%;/"></iframe>" document.all("divOrders").innerHTML= html; ShowDiv("divOrders",txtID); } else { document.all("divOrders").style.display="none"; } } } function ShowDiv(divID,txtID) { document.all(divID).style.display = ""; //SelectOrder 是要显示的层的ID var drp = document.all(divID); var obj = document.all(txtID); //btnOrderIn 是要显示在的目标控件的ID if(drp) { var objs = obj; var t = obj.offsetTop, h = obj.clientHeight, l = obj.offsetLeft, p = obj.type; while (obj = obj.offsetParent){t += obj.offsetTop; l += obj.offsetLeft;} var cw = drp.clientWidth, ch = drp.clientHeight; var dw = document.body.clientWidth, dl = document.body.scrollLeft, dt = document.body.scrollTop; if (document.body.clientHeight + dt - t - h >= ch) drp.style.top = (p=='image')? t + h : t + h + 6; else drp.style.top = (t - dt < ch) ? ((p=='image')? t + h : t + h + 6) : t - ch; if (dw + dl - l >= cw) drp.style.left = l; else drp.style.left = (dw >= cw) ? dw - cw + dl : dl; drp.style.visibility = 'visible'; } } //假如页面有几个TEXTBOX和几个相应的DIV的时候，可以把divID作为参数传进来。