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
浙公网安备 33010602011771号
