近来一直在开发股票模拟系统，终于告一段落了，回想起来感慨很多。突然想应该做点总结了，想来想去还是觉得通过写点日志来把相关的知识点记录下来，下面就我在项目中经常用到的动态提示搜索选项功能的实现。
第一步，先做好搜索页面
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!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"> <title>无标题页</title> <script language=javascript src=JScript.js type="text/javascript" ></script> <style> #result{ position:absolute; width:150px; height:auto; margin:0px; z-index:1; font-size:14px; border: 1px dashed #ccccc4; display:none; } #result .firstHang{ background-color:#DDDDDD; height:15px; padding-top:5px; } #result b{ width:61px; float:left; } #result nobr{ width:61px; float:left; } #result .otherHang{ background-color:#FFFFFF; height:15px; padding-top:5px; } #content{ margin-left:0px; padding-left:0px; } </style> </head> <body> <form id="form1" runat="server"> <div align=center style="padding-top:100px"> <input id="searchTxt" onkeyUp="startRequest(this.value)" /> <!-- 输入框 --> </div> <div id="result" align="center"> <!-- 下拉搜索框 --> <div class="firstHang"> <b>搜索</b><b>标题</b> </div> <div id="stockListDiv"></div> </div> </form> </body> </html> <script language="javascript"> var obj=document.getElementById("result"); var rela=document.getElementById("searchTxt"); SetDivLocation(obj,rela); function SetDivLocation(obj,rela) //设置下拉搜索框与输入框的相对位置 { var x,y; var oRect=rela.getBoundingClientRect(); //获得输入框的位置 x=oRect.left; y=oRect.top; obj.style.left=x+"px"; //这里要加上px,否则在fiexfox就会失效 obj.style.top=y+rela.offsetHeight+"px"; } </script>
第二步，添加返回搜索结果的页面，该页面由于不用在客户端显示，所以就不用做界面。
Imports System.Text Partial Class Search Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim searchContent As String = Request("content").ToString '获取搜索内容 Dim searchResult As New StringBuilder If IsNumeric(searchContent) Then '判断是否为数字,输入不同的内容 searchResult.Append("<div class='otherHang'><nobr>11</nobr><nobr>11</nobr></div>") searchResult.Append("<div class='otherHang'><nobr>22</nobr><nobr>22</nobr></div>") searchResult.Append("<div class='otherHang'><nobr>22</nobr><nobr>22</nobr></div>") Else searchResult.Append("<div class='otherHang'><nobr>aa</nobr><nobr>aa</nobr></div>") searchResult.Append("<div class='otherHang'><nobr>bb</nobr><nobr>bb</nobr></div>") searchResult.Append("<div class='otherHang'><nobr>cc</nobr><nobr>cc</nobr></div>") End If Response.Write(searchResult.ToString) '向客户端发送结果 Response.End() '关闭客户端输出流 End Sub End Class
第三步就是最关键的一步了
// JScript 文件 var xmlHttp; function cratexmlHttpRequest() { //判断是否为IE浏览器 if(window.ActiveXObject) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) { xmlHttp=new window.XMLHttpRequest(); } } //启动对页面的请求 function startRequest(content) { cratexmlHttpRequest(); //设置请求状态变化调用的方法 xmlHttp.onreadystatechange=handleState; //建立对服务器的调用 var url="Search.aspx?content="+escape(content); '发送页面url xmlHttp.open("get",url,true); xmlHttp.send(null); } function handleState() { try{ if(xmlHttp.readyState==4) { if(xmlHttp.status==200) { var data=xmlHttp.responseText; '得到搜索结果 var result=document.getElementById("result"); var stockListDiv=document.getElementById("stockListDiv"); if(data=="") '如果搜索结果为空，不显示下拉框 { result.style.display="none"; stockListDiv.innerHTML=""; } else { stockListDiv.innerHTML=data; '显示下拉框 result.style.display="block"; } } } } catch(error) {error.message} }
最后实现的效果如下：
