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

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

第一步，先做好搜索页面

 

    无标题页             #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;}           

          var obj=document.getElementById("result");var rela=document.getElementById("searchTxt");SetDivLocation(obj,rela);function SetDivLocation(obj,rela)             //设置下拉搜索框与输入框的相对位置{   var   x,y;     var oRect=rela.getBoundingClientRect();   //获得输入框的位置   x=oRect.left;   y=oRect.top;    obj.style.left=x+"px";                   //这里要加上px,否则在fiexfox就会失效   obj.style.top=y+rela.offsetHeight+"px";}

 

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

Imports System.TextPartial 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("

")            searchResult.Append("")            searchResult.Append("")        Else            searchResult.Append("")            searchResult.Append("")            searchResult.Append("")        End If        Response.Write(searchResult.ToString)　'向客户端发送结果        Response.End()                                        '关闭客户端输出流    End SubEnd 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}}

最后实现的效果如下：