Using ajax and asp.net to realize intelligent search function

I have been developing a stock simulation system recently, and it has finally come to an end. In retrospect, I feel a lot of emotion. I suddenly thought that I should make some summaries. After much deliberation, I still feel that I can record the relevant knowledge points by writing some logs. The following is the realization of the dynamic prompt search option function that I often use in projects.

The first step is to do a search page first

<%@ 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) //Set drop-down The relative position of the search box and 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"; //Add px here, otherwise it will be invalid in fiexfox    obj.style.top=y+rela.offsetHeight+"px"; }

</script>

The second step is to add a page that returns search results. Since this page does not need to be displayed on the client, it does not need to be an interface.

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) 'Send the result to the client
        Response.End() 'Close the client output stream
    End Sub
End Class

The third step is the most critical step

// JScript file
var xmlHttp;
function cratexmlHttpRequest()
{
    // Determine whether it is an IE browser
if(window.ActiveXObject)
{      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) {      xmlHttp= new window.XMLHttpRequest(); } } //Start the request to the page function startRequest(content) { cratexmlHttpRequest(); //Set the method of request state change call xmlHttp.onreadystatechange=handleState; //Create 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, do not display the drop-down box    {      result.style.display="none";            stockListDiv.innerHTML="";    }    else    {       stockListDiv.innerHTML =data;　　　' Display the drop-down box       result.style.display="block";    }   } } } catch(error) {error.message}}

The final effect is as follows:

Renderings of search results

Using ajax and asp.net to realize intelligent search function

Guess you like