AJAX实例二：实现类似Google的搜索提示【原著】
功能就不用多说了，到http://www.google.cn/去试一下就知道了。本例是参考了《征服AJAX》 一书中的范例。
实现该功能也是用到两个页面，一个请求显示（这次使用的静态页面），一个用于获取关键字到数据表中模糊查询并获取满足条件的数据输出。这里的搜索提示实际上是用div来实现的，C#代码很简单，关键是看明白JavaScript。
Code1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<title>无标题页</title>5
6
<script language="javascript" type="text/javascript">
7
<!--8
var searchReq = createReq();9
/**//* 创建XMLHttpRequest的第一种方法10
try{11
searchReq = new ActiveXObject('Msxml2.XMLHTTP');12
}13
catch(e){14
try{15
searchReq = new ActiveXObject('Microsoft.XMLHTTP');16
}17
catch(e){18
try{19
searchReq = new XMLHttpRequest();20
}21
catch(e)22
{}23
}24
}25
*/26
//创建XMLHttpRequest的第二种方法27
function createReq(){28
var httpReq;29
30
if(window.XMLHttpRequest){31
httpReq = new XMLHttpRequest();32
if(httpReq.overrideMimeType){33
httpReq.overrideMimeType('text/xml');34
}35
}36
else if(window.ActiveXObject){37
try{38
httpReq = new ActiveXObject('Msxml2.XMLHTTP');39
}40
catch(e){41
try{42
httpReq = new ActiveXObject('Microsoft.XMLHTTP');43
}44
catch(e){45
}46
} 47
}48
return httpReq;49
}50
//发送HTTP请求，当输入框的内容变化时，会调用该函数51
function searchSuggest(){52
var str = escape(document.getElementById("txtSearch").value);53
searchReq.open("get","Server.aspx?searchText="+str,true);54
searchReq.onreadystatechange = handleSearchSuggest;55
searchReq.send(null);56
}57
58
//当 onreadystatechange 值变化时，会调用该函数59
//注意searchSuggest()中的这一句searchReq.onreadystatechange = handleSearchSuggest;60
function handleSearchSuggest(){61
if(searchReq.readyState == 4){62
if(searchReq.status == 200){63
var suggestText = document.getElementById("search_suggest");64
var sourceText = searchReq.responseText.split("\n");65
if(sourceText.length>1){66
suggestText.style.display="";67
suggestText.innerHTML = "";68
for(var i=0;i<sourceText.length-1;i++) {69
var s='<div onmouseover="javascript:suggestOver(this);"';70
s+=' onmouseout="javascript:suggestOut(this);" ';71
s+=' onclick="javascript:setSearch(this.innerHTML);" ';72
s+=' class="suggest_link">' +sourceText[i]+'</div>';73
suggestText.innerHTML += s;74
}75
}76
else{77
suggestText.style.display="none";78
}79
}80
}81
}82
83
function suggestOver(div_value){84
div_value.className = "suggest_link_over";85
}86
87
function suggestOut(div_value){88
div_value.className = "suggest_link";89
}90
91
function setSearch(obj){92
document.getElementById("txtSearch").value = obj;93
var div = document.getElementById("search_suggest");94
div.innerHTML = "";95
div.style.display="none"; 96
}97
98
function tbblur(){99
var div = document.getElementById("search_suggest");100
//div.innerHTML = "";101
div.style.display="none"; 102
}103
//-->104
</script>105
106
<style type="text/css" media="screen">107
body108
{}{109
font: 11px arial;110
}111
.suggest_link112
{}{113
background-color: #FFFFFF;114
padding: 2px 6px 2px 6px;115
}116
.suggest_link_over117
{}{118
background-color: #E8F2FE;119
padding: 2px 6px 2px 6px;120
}121
#search_suggest122
{}{123
position: absolute;124
background-color: #FFFFFF;125
text-align: left;126
border: 1px solid #000000;127
}128
</style>129
</head>130
<body>131
<div style="width: 500px;">132
<form id="frm" action="">133
<input type="text" name="txtSearch" id="txtSearch" onkeyup="searchSuggest();" autocomplete="off" />134
<input type="submit" name="btnSearch" id="btnSearch" value="搜索" />135
<br><div id="search_suggest" style="display:none">136
</div>137
Welcome to ajax!138
</form>139
</div>140
</body>141
</html>142
Server.aspx:就是留第一行，把其它删除。
Code<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Server.aspx.cs" Inherits="ajaxPractice.搜索提示S端" %>
Server.aspx.cs
Code1
using System;2
using System.Collections;3
using System.Configuration;4
using System.Data;5
using System.Linq;6
using System.Web;7
using System.Web.Security;8
using System.Web.UI;9
using System.Web.UI.HtmlControls;10
using System.Web.UI.WebControls;11
using System.Web.UI.WebControls.WebParts;12
using System.Xml.Linq;13
using System.Data.SqlClient;14
15
namespace ajaxPractice16
{17
public partial class 搜索提示S端 : System.Web.UI.Page18
{19
protected void Page_Load(object sender, EventArgs e)20
{21
if (Request.QueryString["searchText"] != null)22
{23
if (Request.QueryString["searchText"].ToString().Trim().Length > 0)24
{25
#region26
DataTable dt = new DataTable();27
using (SqlConnection conn = new SqlConnection(28
System.Configuration.ConfigurationManager.AppSettings["ConnStr"]))29
{30
SqlCommand cmd = new SqlCommand();31
cmd.Connection = conn;32
cmd.CommandText = string.Format(33
"Select BookName From Books Where BookName like '%{0}%'",34
Request.QueryString["searchText"]);35
SqlDataAdapter adapter = new SqlDataAdapter(cmd);36
conn.Open();37
adapter.Fill(dt);38
}39
string returnText = "";40
if (dt != null && dt.Rows.Count > 0)41
{42
for (int i = 0; i < dt.Rows.Count; i++)43
{44
returnText += dt.Rows[i][0].ToString() + "\n";45
}46
}47
48
Response.Write(returnText);49
#endregion50
}51
}52
}53
}54
}55
/Files/Ferry/temp/AjaxSearch.rar
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述