时间：2021-07-01 10:21:17 帮助过：13人阅读
- <br><%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml" > <br><head runat="server"> <br><title>无标题页</title> <br><script language=javascript src=JScript.js type="text/javascript" ></script> <br><style> <br>#result{ <br>position:absolute; <br>width:150px; <br>height:auto; <br>margin:0px; <br>z-index:1; <br>font-size:14px; <br>border: 1px dashed #ccccc4; <br>display:none; <br>} <br>#result .firstHang{ <br>background-color:#DDDDDD; <br>height:15px; <br>padding-top:5px; <br>} <br>#result b{ <br>width:61px; <br>float:left; <br>} <br>#result nobr{ <br>width:61px; <br>float:left; <br>} <br>#result .otherHang{ <br>background-color:#FFFFFF; <br>height:15px; <br>padding-top:5px; <br>} <br>#content{ <br>margin-left:0px; <br>padding-left:0px; <br>} <br></style> <br></head> <br><body> <br><form id="form1" runat="server"> <br><div align=center style="padding-top:100px"> <br><input id="searchTxt" onkeyUp="startRequest(this.value)" /> <!-- 输入框 --> <br></div> <br><div id="result" align="center"> <!-- 下拉搜索框 --> <br><div class="firstHang"> <br><b>搜索</b><b>标题</b> <br></div> <br><div id="stockListDiv"></div> <br></div> <br></form> <br></body> <br></html> <br><script language="javascript"> <br>var obj=document.getElementById("result"); <br>var rela=document.getElementById("searchTxt"); <br>SetDivLocation(obj,rela); <br>function SetDivLocation(obj,rela) //设置下拉搜索框与输入框的相对位置 <br>{ <br>var x,y; <br>var oRect=rela.getBoundingClientRect(); //获得输入框的位置 <br>x=oRect.left; <br>y=oRect.top; <br>obj.style.left=x+"px"; //这里要加上px,否则在fiexfox就会失效 <br>obj.style.top=y+rela.offsetHeight+"px"; <br>} <br></script> <br> <br>第二步，添加返回搜索结果的页面，该页面由于不用在客户端显示，所以就不用做界面。 <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>Imports System.Text <br>Partial Class Search <br>Inherits System.Web.UI.Page <br>Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load <br>Dim searchContent As String = Request("content").ToString '获取搜索内容 <br>Dim searchResult As New StringBuilder <br>If IsNumeric(searchContent) Then '判断是否为数字,输入不同的内容 <br>searchResult.Append("<div class='otherHang'><nobr>11</nobr><nobr>11</nobr></div>") <br>searchResult.Append("<div class='otherHang'><nobr>22</nobr><nobr>22</nobr></div>") <br>searchResult.Append("<div class='otherHang'><nobr>22</nobr><nobr>22</nobr></div>") <br>Else <br>searchResult.Append("<div class='otherHang'><nobr>aa</nobr><nobr>aa</nobr></div>") <br>searchResult.Append("<div class='otherHang'><nobr>bb</nobr><nobr>bb</nobr></div>") <br>searchResult.Append("<div class='otherHang'><nobr>cc</nobr><nobr>cc</nobr></div>") <br>End If <br>Response.Write(searchResult.ToString) '向客户端发送结果 <br>Response.End() '关闭客户端</li></ol></pre>输出流 <br>End Sub <br>End Class <br> <br>第三步就是最关键的一步了 <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>// JScript 文件 <br>var xmlHttp; <br>function cratexmlHttpRequest() <br>{ <br>//判断是否为IE浏览器 <br>if(window.ActiveXObject) <br>{ <br>xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); <br>} <br>else if(window.XMLHttpRequest) <br>{ <br>xmlHttp=new window.XMLHttpRequest(); <br>} <br>} <br>//启动对页面的请求 <br>function startRequest(content) <br>{ <br>cratexmlHttpRequest(); <br>//设置请求状态变化调用的方法 <br>xmlHttp.onreadystatechange=handleState; <br>//建立对服务器的调用 <br>var url="Search.aspx?content="+escape(content); '发送页面url <br>xmlHttp.open("get",url,true); <br>xmlHttp.send(null); <br>} <br>function handleState() <br>{ <br>try{ <br>if(xmlHttp.readyState==4) <br>{ <br>if(xmlHttp.status==200) <br>{ <br>var data=xmlHttp.responseText; '得到搜索结果 <br>var result=document.getElementById("result"); <br>var stockListDiv=document.getElementById("stockListDiv"); <br>if(data=="") '如果搜索</li></ol></pre>结果为空，不显示下拉框 <br>{ <br>result.style.display="none"; <br>stockListDiv.innerHTML=""; <br>} <br>else <br>{ <br>stockListDiv.innerHTML=data; '显示下拉框 <br>result.style.display="block"; <br>} <br>} <br>} <br>} <br>catch(error) <br>{error.message} <br>} <br> <br>最后实现的效果如下： <br><img src="https://img.gxlcms.com//Uploads-s/new/2019-09-19-201919/20100304194424886.png">