asp.net手写AJAX实现类似Google的搜索提示  

原文：http://www.cnblogs.com/Ferry/archive/2008/12/24/1361505.html

功能就不用多说了，到http://www.google.cn/去试一下就知道了。本例是参考了《征服AJAX》 一书中的范例。

    实现该功能也是用到两个页面，一个请求显示（这次使用的静态页面），一个用于获取关键字到数据表中模糊查询并获取满足条件的数据输出。这里的搜索提示实际上是用div来实现的，C#代码很简单，关键是看明白JavaScript。

    asp.net手写AJAX实现类似Google的搜索提示  

    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2asp.net手写AJAX实现类似Google的搜索提示  <html xmlns="http://www.w3.org/1999/xhtml">
  3asp.net手写AJAX实现类似Google的搜索提示  <head>
  4asp.net手写AJAX实现类似Google的搜索提示      <title>无标题页</title>
  5asp.net手写AJAX实现类似Google的搜索提示  
  6    <script language="javascript" type="text/javascript">    <!--
  8asp.net手写AJAX实现类似Google的搜索提示      var searchReq = createReq();
  9        try{
 11asp.net手写AJAX实现类似Google的搜索提示              searchReq = new ActiveXObject('Msxml2.XMLHTTP');
 12asp.net手写AJAX实现类似Google的搜索提示          }
 13asp.net手写AJAX实现类似Google的搜索提示          catch(e){
 14asp.net手写AJAX实现类似Google的搜索提示              try{
 15asp.net手写AJAX实现类似Google的搜索提示                  searchReq = new ActiveXObject('Microsoft.XMLHTTP');
 16asp.net手写AJAX实现类似Google的搜索提示              }
 17asp.net手写AJAX实现类似Google的搜索提示              catch(e){
 18asp.net手写AJAX实现类似Google的搜索提示                  try{
 19asp.net手写AJAX实现类似Google的搜索提示                      searchReq = new XMLHttpRequest();
 20asp.net手写AJAX实现类似Google的搜索提示                  }
 21asp.net手写AJAX实现类似Google的搜索提示                  catch(e)
 22asp.net手写AJAX实现类似Google的搜索提示                  {}
 23asp.net手写AJAX实现类似Google的搜索提示              }
 24asp.net手写AJAX实现类似Google的搜索提示          }
 25asp.net手写AJAX实现类似Google的搜索提示          */
 26asp.net手写AJAX实现类似Google的搜索提示      //创建XMLHttpRequest的第二种方法
 27    function createReq()        var httpReq;
 29asp.net手写AJAX实现类似Google的搜索提示          
 30        if(window.XMLHttpRequest)            httpReq = new XMLHttpRequest();
 32            if(httpReq.overrideMimeType)                httpReq.overrideMimeType('text/xml');
 34asp.net手写AJAX实现类似Google的搜索提示              }
 35asp.net手写AJAX实现类似Google的搜索提示          }
 36        else if(window.ActiveXObject)            try                 httpReq = new ActiveXObject('Msxml2.XMLHTTP');
 39asp.net手写AJAX实现类似Google的搜索提示              }
 40            catch(e)                try                        httpReq = new ActiveXObject('Microsoft.XMLHTTP');
 43asp.net手写AJAX实现类似Google的搜索提示                  }
 44                catch(e)                }
 46asp.net手写AJAX实现类似Google的搜索提示               }  
 47asp.net手写AJAX实现类似Google的搜索提示          }
 48asp.net手写AJAX实现类似Google的搜索提示          return httpReq;
 49asp.net手写AJAX实现类似Google的搜索提示       }
 50asp.net手写AJAX实现类似Google的搜索提示       //发送HTTP请求，当输入框的内容变化时，会调用该函数
 51     function searchSuggest()            var str = escape(document.getElementById("txtSearch").value);
 53asp.net手写AJAX实现类似Google的搜索提示              searchReq.open("get","Server.aspx?searchText="+str,true);
 54asp.net手写AJAX实现类似Google的搜索提示              searchReq.onreadystatechange = handleSearchSuggest;
 55asp.net手写AJAX实现类似Google的搜索提示              searchReq.send(null);
 56asp.net手写AJAX实现类似Google的搜索提示        }
 57asp.net手写AJAX实现类似Google的搜索提示       
 58asp.net手写AJAX实现类似Google的搜索提示       //当 onreadystatechange 值变化时，会调用该函数
 59asp.net手写AJAX实现类似Google的搜索提示       //注意searchSuggest()中的这一句searchReq.onreadystatechange = handleSearchSuggest;
 60     function handleSearchSuggest()        if(searchReq.readyState == 4)            if(searchReq.status == 200)                var suggestText = document.getElementById("search_suggest");
 64asp.net手写AJAX实现类似Google的搜索提示                  var sourceText = searchReq.responseText.split("\n");
 65                if(sourceText.length>1)                    suggestText.style.display="";
 67asp.net手写AJAX实现类似Google的搜索提示                      suggestText.innerHTML = "";
 68                    for(var i=0;i<sourceText.length-1;i++)                         var s='<div onmouseover="javascript:suggestOver(this);"';
 70asp.net手写AJAX实现类似Google的搜索提示                          s+=' onmouseout="javascript:suggestOut(this);" ';
 71asp.net手写AJAX实现类似Google的搜索提示                          s+=' onclick="javascript:setSearch(this.innerHTML);" ';
 72asp.net手写AJAX实现类似Google的搜索提示                          s+=' class="suggest_link">' +sourceText[i]+'</div>';
 73asp.net手写AJAX实现类似Google的搜索提示                          suggestText.innerHTML += s;
 74asp.net手写AJAX实现类似Google的搜索提示                      }
 75asp.net手写AJAX实现类似Google的搜索提示                  }
 76                else                    suggestText.style.display="none";
 78asp.net手写AJAX实现类似Google的搜索提示                  }
 79asp.net手写AJAX实现类似Google的搜索提示              }
 80asp.net手写AJAX实现类似Google的搜索提示         }
 81asp.net手写AJAX实现类似Google的搜索提示       }
 82asp.net手写AJAX实现类似Google的搜索提示       
 83     function suggestOver(div_value)        div_value.className = "suggest_link_over";
 85asp.net手写AJAX实现类似Google的搜索提示       }
 86asp.net手写AJAX实现类似Google的搜索提示       
 87     function suggestOut(div_value)        div_value.className = "suggest_link";
 89asp.net手写AJAX实现类似Google的搜索提示       }
 90asp.net手写AJAX实现类似Google的搜索提示       
 91     function setSearch(obj)        document.getElementById("txtSearch").value = obj;
 93asp.net手写AJAX实现类似Google的搜索提示          var div = document.getElementById("search_suggest");
 94asp.net手写AJAX实现类似Google的搜索提示          div.innerHTML = "";
 95asp.net手写AJAX实现类似Google的搜索提示          div.style.display="none"; 
 96asp.net手写AJAX实现类似Google的搜索提示       }
 97asp.net手写AJAX实现类似Google的搜索提示      
 98    function tbblur()        var div = document.getElementById("search_suggest");
100asp.net手写AJAX实现类似Google的搜索提示          //div.innerHTML = "";
101asp.net手写AJAX实现类似Google的搜索提示          div.style.display="none"; 
102asp.net手写AJAX实现类似Google的搜索提示      }
103asp.net手写AJAX实现类似Google的搜索提示      //-->
104asp.net手写AJAX实现类似Google的搜索提示      </script>
105asp.net手写AJAX实现类似Google的搜索提示  
106    <style type="text/css" media="screen">        body
108        }            font: 11px arial;
110asp.net手写AJAX实现类似Google的搜索提示          }
111asp.net手写AJAX实现类似Google的搜索提示          .suggest_link
112        }            background-color: #FFFFFF;
114asp.net手写AJAX实现类似Google的搜索提示              padding: 2px 6px 2px 6px;
115asp.net手写AJAX实现类似Google的搜索提示          }
116asp.net手写AJAX实现类似Google的搜索提示          .suggest_link_over
117        }            background-color: #E8F2FE;
119asp.net手写AJAX实现类似Google的搜索提示              padding: 2px 6px 2px 6px;
120asp.net手写AJAX实现类似Google的搜索提示          }
121asp.net手写AJAX实现类似Google的搜索提示          #search_suggest
122        }            position: absolute;
124asp.net手写AJAX实现类似Google的搜索提示              background-color: #FFFFFF;
125asp.net手写AJAX实现类似Google的搜索提示              text-align: left;
126asp.net手写AJAX实现类似Google的搜索提示              border: 1px solid #000000;
127asp.net手写AJAX实现类似Google的搜索提示          }
128asp.net手写AJAX实现类似Google的搜索提示      </style>
129asp.net手写AJAX实现类似Google的搜索提示  </head>
130asp.net手写AJAX实现类似Google的搜索提示  <body>
131asp.net手写AJAX实现类似Google的搜索提示      <div style="width: 500px;">
132asp.net手写AJAX实现类似Google的搜索提示          <form id="frm" action="">
133asp.net手写AJAX实现类似Google的搜索提示          <input type="text" name="txtSearch" id="txtSearch" onkeyup="searchSuggest();" autocomplete="off" />
134asp.net手写AJAX实现类似Google的搜索提示          <input type="submit" name="btnSearch" id="btnSearch" value="搜索" />
135asp.net手写AJAX实现类似Google的搜索提示          <br><div id="search_suggest" style="display:none">
136asp.net手写AJAX实现类似Google的搜索提示          </div>
137asp.net手写AJAX实现类似Google的搜索提示          Welcome to ajax!
138asp.net手写AJAX实现类似Google的搜索提示          </form>
139asp.net手写AJAX实现类似Google的搜索提示      </div>
140asp.net手写AJAX实现类似Google的搜索提示  </body>
141asp.net手写AJAX实现类似Google的搜索提示  </html>
142asp.net手写AJAX实现类似Google的搜索提示  

 

       Server.aspx:就是留第一行，把其它删除。      


 

    Server.aspx.cs   

using System;
 2asp.net手写AJAX实现类似Google的搜索提示  using System.Collections;
 3asp.net手写AJAX实现类似Google的搜索提示  using System.Configuration;
 4asp.net手写AJAX实现类似Google的搜索提示  using System.Data;
 5asp.net手写AJAX实现类似Google的搜索提示  using System.Linq;
 6asp.net手写AJAX实现类似Google的搜索提示  using System.Web;
 7asp.net手写AJAX实现类似Google的搜索提示  using System.Web.Security;
 8asp.net手写AJAX实现类似Google的搜索提示  using System.Web.UI;
 9asp.net手写AJAX实现类似Google的搜索提示  using System.Web.UI.HtmlControls;
10asp.net手写AJAX实现类似Google的搜索提示  using System.Web.UI.WebControls;
11asp.net手写AJAX实现类似Google的搜索提示  using System.Web.UI.WebControls.WebParts;
12asp.net手写AJAX实现类似Google的搜索提示  using System.Xml.Linq;
13asp.net手写AJAX实现类似Google的搜索提示  using System.Data.SqlClient;
14asp.net手写AJAX实现类似Google的搜索提示  
15asp.net手写AJAX实现类似Google的搜索提示  namespace ajaxPractice
16    public partial class 搜索提示S端 : System.Web.UI.Page
18            protected void Page_Load(object sender, EventArgs e)
20                    if (Request.QueryString["searchText"] != null)
22                            if (Request.QueryString["searchText"].ToString().Trim().Length > 0)
24                                                        DataTable dt = new DataTable();
27asp.net手写AJAX实现类似Google的搜索提示                      using (SqlConnection conn = new SqlConnection(
28asp.net手写AJAX实现类似Google的搜索提示                          System.Configuration.ConfigurationManager.AppSettings["ConnStr"]))
29                                            SqlCommand cmd = new SqlCommand();
31asp.net手写AJAX实现类似Google的搜索提示                          cmd.Connection = conn;
32asp.net手写AJAX实现类似Google的搜索提示                          cmd.CommandText = string.Format(
33asp.net手写AJAX实现类似Google的搜索提示                              "Select BookName From Books Where BookName like '%{0}%'",
34asp.net手写AJAX实现类似Google的搜索提示                              Request.QueryString["searchText"]);
35asp.net手写AJAX实现类似Google的搜索提示                          SqlDataAdapter adapter = new SqlDataAdapter(cmd);
36asp.net手写AJAX实现类似Google的搜索提示                          conn.Open();
37asp.net手写AJAX实现类似Google的搜索提示                          adapter.Fill(dt);
38asp.net手写AJAX实现类似Google的搜索提示                      }
39asp.net手写AJAX实现类似Google的搜索提示                      string returnText = "";
40asp.net手写AJAX实现类似Google的搜索提示                      if (dt != null && dt.Rows.Count > 0)
41                                            for (int i = 0; i < dt.Rows.Count; i++)
43                                                    returnText += dt.Rows[i][0].ToString() + "\n";
45asp.net手写AJAX实现类似Google的搜索提示                          }
46asp.net手写AJAX实现类似Google的搜索提示                      }
47asp.net手写AJAX实现类似Google的搜索提示  
48asp.net手写AJAX实现类似Google的搜索提示                      Response.Write(returnText);
49asp.net手写AJAX实现类似Google的搜索提示                      #endregion
50asp.net手写AJAX实现类似Google的搜索提示                  }
51asp.net手写AJAX实现类似Google的搜索提示              }
52asp.net手写AJAX实现类似Google的搜索提示          }
53asp.net手写AJAX实现类似Google的搜索提示      }
54asp.net手写AJAX实现类似Google的搜索提示  }

相关文章：

  • 2022-12-23
  • 2022-12-23
  • 2021-11-18
  • 2022-12-23
  • 2019-07-11
  • 2022-01-26
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-02-24
  • 2021-10-15
  • 2022-01-05
  • 2022-12-23
  • 2021-10-07
  • 2021-12-24
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode