Code for implementing the Smart Search function using asp.net and ajax

Last Update:2013-10-17 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Step 1: Search the page
Copy codeThe Code is 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">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> No title 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>
</Head>
<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>
</Html>
<Script language = "javascript">
Var obj = document. getElementById ("result ");
Var rela = document. getElementById ("searchTxt ");
SetDivLocation (obj, rela );
Function SetDivLocation (obj, rela) // you can specify the relative position of the drop-down search box and the input box.
{
Var x, y;
Var oRect = rela. getBoundingClientRect (); // obtain the position of the input box
X = oRect. left;
Y = oRect. top;
Obj. style. left = x + "px"; // px must be added here, otherwise it will become invalid in fiexfox.
Obj. style. top = y + rela. offsetHeight + "px ";
}
</Script>

Step 2: Add a page to return the search results. This page does not need to be displayed on the client, so you do not need to create an interface.
Copy codeThe Code is 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 the search content
Dim searchResult As New StringBuilder
If IsNumeric (searchContent) then' is used to determine whether it is a number and enter 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> </div> ")
SearchResult. Append ("<div class = 'otherhang'> <nobr> bb </nobr> </div> ")
SearchResult. Append ("<div class = 'otherhang'> <nobr> cc </nobr> </div> ")
End If
Response. Write (searchResult. ToString) 'sends the result to the client
Response. End () 'Close the client output stream
End Sub
End Class

Step 3 is the most critical step.
Copy codeThe Code is as follows:
// JScript File
Var xmlHttp;
Function cratexmlHttpRequest ()
{
// Determine whether the browser is an IE browser
If (window. ActiveXObject)
{
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
}
Else if (window. XMLHttpRequest)
{
XmlHttp = new window. XMLHttpRequest ();
}
}
// Initiate a request to the page
Function startRequest (content)
{
CratexmlHttpRequest ();
// Set the call Method for Request status change
XmlHttp. onreadystatechange = handleState;
// Create a server call
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; '. The search result is displayed.
Var result = document. getElementById ("result ");
Var stockListDiv = document. getElementById ("stockListDiv ");
If (data = "") ', if the search result is empty, the drop-down list is not displayed.
{
Result. style. display = "none ";
StockListDiv. innerHTML = "";
}
Else
{
StockListDiv. innerHTML = data; 'show the drop-down box
Result. style. display = "block ";
}
}
}
}
Catch (error)
{Error. message}
}

The final implementation result is as follows:

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Code for implementing the Smart Search function using asp.net and ajax

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support