The first step is to do the search page first
Copy Code code as follows:
<%@ 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 ">
<title> Untitled Page </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>
<body>
<form id= "Form1" runat= "Server" >
<div align=center style= "padding-top:100px" >
<input id= "Searchtxt" onkeyup= "Startrequest (this.value)"/> <!--input box-->
</div>
<div id= "result" align= "center" > <!--drop-down search box-->
<div class= "Firsthang" >
<b> Search </b><b> Title </b>
</div>
<div id= "Stocklistdiv" ></div>
</div>
</form>
</body>
<script language= "JavaScript" >
var Obj=document.getelementbyid ("result");
var Rela=document.getelementbyid ("Searchtxt");
Setdivlocation (Obj,rela);
function Setdivlocation (Obj,rela)//Set the relative position of the Drop-down search box to the input box
{
var x,y;
var orect=rela.getboundingclientrect (); Get the position of the input box
X=orect.left;
Y=orect.top;
obj.style.left=x+ "px"; PX is added here, otherwise it will fail in Fiexfox.
obj.style.top=y+rela.offsetheight+ "px";
}
</script>
The second step is to add a page that returns the search results, and the page does not need to be displayed on the client side.
Copy Code code as follows:
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 ' Get search content
Dim SearchResult as New StringBuilder
If IsNumeric (searchcontent) Then ' Judge whether it is a number, enter a different content
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) ' sends results to client
Response.End () ' Shut down client output stream
End Sub
End Class
The third step is the most critical step.
Copy Code code as follows:
JScript files
var xmlHttp;
function Cratexmlhttprequest ()
{
Determine if it is an IE browser
if (window. ActiveXObject)
{
Xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP");
}
else if (window. XMLHttpRequest)
{
Xmlhttp=new window. XMLHttpRequest ();
}
}
Start a request to a page
function Startrequest (content)
{
Cratexmlhttprequest ();
Set the method for requesting state change calls
Xmlhttp.onreadystatechange=handlestate;
Establish a call to the server
var url= "search.aspx?content=" +escape (content); ' Send page URL
Xmlhttp.open ("Get", url,true);
Xmlhttp.send (NULL);
}
function Handlestate ()
{
try{
if (xmlhttp.readystate==4)
{
if (xmlhttp.status==200)
{
var Data=xmlhttp.responsetext; ' Get search results
var Result=document.getelementbyid ("result");
var Stocklistdiv=document.getelementbyid ("Stocklistdiv");
if (data== "") ' if the search result is empty, the dropdown box is not displayed
{
Result.style.display= "None";
Stocklistdiv.innerhtml= "";
}
Else
{
Stocklistdiv.innerhtml=data; ' Show dropdown box
result.style.display= "Block";
}
}
}
}
catch (Error)
{Error.message}
}
The results of the final implementation are as follows:
