类似 Google 的搜索文本框
3.92/5 (20投票s)
类似 Google 的搜索文本框
引言
我们中的许多人都在使用 Google 作为搜索引擎。 我们喜欢 Google 的原因有很多，其中一个原因是 Google 建议可能的搜索结果并使生活更轻松。 这种搜索建议文本框在我们的许多 Web 应用程序中非常有用。 本文将帮助您实现搜索建议文本框。
用户将在搜索文本框中键入一个字符。Onkeyup 事件将被触发。它调用负责处理 AJAX 并接收响应的方法。 此响应将使用 DIV 标签显示。
背景
AJAX 请求将通过使用 JavaScript 的 XMLHttpRequest 对象进行处理。
使用 XMLHttpRequest 对象，Internet Explorer 客户端可以直接检索 XML 数据并将其提交到 Web 服务器，而无需重新加载页面。 要将 XML 数据转换为可呈现的 HTML 内容，请使用客户端 XML DOM 或可扩展样式表语言转换 (XSLT) 来组成用于呈现的 HTML 元素。
Using the Code
本文随附的代码主要包含三个文件
- Welcome.aspx
- SearchSuggest.js
- Result.aspx
让我们详细看看每个页面。
Welcome.aspx
此页面有一个搜索文本框，可在用户在搜索文本框中键入时显示建议的搜索结果。
<script language="JavaScript" type="text/javascript" src="SearchSuggest.js"></script>
上面的代码将导入 SearchSuggest.js 文件，该文件负责异步回发。
<style type="text/css" media="screen">
body
{
font: 11px arial;
}
.suggest_link
{
background-color: #FFFFFF;
padding: 2px 6px 2px 6px;
}
.suggest_link_over
{
background-color: #3366CC;
padding: 2px 6px 2px 6px;
}
#search_suggest
{
position: absolute;
background-color: #FFFFFF;
text-align: left;
border: 1px solid #000000;
}
</style>
上面的 CSS 代码用于显示来自建议结果的已选中/未选中状态
<input type="text" id="txtSearch" name="txtSearch" alt="Search Criteria"
önkeyup="searchSuggest(event);" autocomplete="off" style="width: 544px" />
<div id=""search_suggest""></div>
<input type="submit" id="cmdSearch" name="cmdSearch"
value="Search" alt="Run Search" />
txtSearch 是搜索的文本框。 SearchSuggest.js 中的方法 searchSuggest(event) 在其 onkeyup 事件上被调用。 我们必须使用 onkeyup 事件，以便在每次输入字符时，搜索建议都应该处理并给出相应的结果。div search_suggest 是隐藏的。 当找到与输入的字符对应的结果时，它将可见。
搜索提交按钮以搜索结果。 本文的范围仅限于搜索建议。 可以在单击搜索按钮时增强功能。 本文没有搜索按钮的 onclick 的任何代码。
SearchSuggest.js
此文件包含使用 XMLHTTPRequest 对象进行 AJAX 请求的代码。
function getXmlHttpRequestObject()
{
if (window.XMLHttpRequest)
{
return new XMLHttpRequest();
//For all the new browsers
}
else if(window.ActiveXObject)
{
//for IE5,IE6
return new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("Time to upgrade your browser?");
}
}
getXmlHttpRequestObject 函数将根据浏览器类型返回 XMLHttpRequest 的对象。 对于 Internet Explorer 5、Internet Explorer 6，它从 "Microsoft.XMLHTTP" 创建 ActiveXObject。
//Our XmlHttpRequest object to get the auto suggestvar
searchReq = getXmlHttpRequestObject();
function searchSuggest(e)
{
var key = window.event ? e.keyCode : e.which;
if (key==40 || key==38)
{
scrolldiv(key);
}
else
{
if (searchReq.readyState == 4 || searchReq.readyState == 0)
{
var str = escape(document.getElementById('txtSearch').value);
strOriginal=str;
searchReq.open("GET", 'Result.aspx?search=' + str, true);
searchReq.onreadystatechange = handleSearchSuggest;
searchReq.send(null);
}
}
}
函数 searchSuggest 将接受发送到 Result.aspx 的请求并从中获取响应。 在请求时，它将搜索文本框中输入的字符作为 querystring 发送。 根据搜索条件，result.aspx 将进行处理并将结果发送回去。 result.aspx 将以 string 格式发送回复。 搜索结果用“~”连接，这将由 handleSearchSuggest 方法处理，并为每个结果创建 Div 标签。
Result.aspx.cs
Result.aspx 的目的是处理 Ajax 请求，因此它在 HTML 中没有任何代码。 它只有一个 aspx 页面。
在后台代码文件中，它验证查询字符串，获取搜索字符串并将其处理到数据库。 然后以字符串格式返回结果。 生成的字符串用“~”连接。
private void Getresult()
{
DataTable dt = new DataTable();
SqlConnection con = new SqlConnection
("Data Source=Local;Initial Catalog=Rahul;User ID=sa;Password=sa");
SqlCommand cmd=new SqlCommand();
cmd.Connection=con;
cmd.CommandType= CommandType.StoredProcedure;
cmd.CommandText="SFund";
//SFund is Stored Procedure Name which accepts
//parameter as @Client_Name and gives the search Result
SqlParameter parClientName = new SqlParameter("@Client_Name", SqlDbType.VarChar);
parClientName.Value = clientName;
cmd.Parameters.Add(parClientName);
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
StringBuilder sb = new StringBuilder();
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
sb.Append(dt.Rows[i].ItemArray[0].ToString() + "~");
}
}
Response.Write(sb.ToString());
}
请求
这是我发布在 The Code Project 上的第一篇文章。 您可以从本文顶部的链接下载代码。