用ajax和asp.net实现智能搜索功能

近来一直在开发股票模拟系统，终于告一段落了，回想起来感慨很多。突然想应该做点总结了，想来想去还是觉得通过写点日志来把相关的知识点记录下来，下面就我在项目中经常用到的动态提示搜索选项功能的实现。

 

第一步，先做好搜索页面

 <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

   
   
   


   

   

    
   

     

 
 

     搜索标题
 

 

  

   

第二步，添加返回搜索结果的页面，该页面由于不用在客户端显示，所以就不用做界面。

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("

1111

")
            searchResult.Append("

2222

")
            searchResult.Append("

2222

")
        Else
            searchResult.Append("

aaaa

")
            searchResult.Append("

bbbb

")
            searchResult.Append("

cccc

")
        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}
}

最后实现的效果如下：