搜索建议(Seraching Suggestion)，已布置好样式
2008-01-22 16:00
309 查看
大家应该都看到过 GOOGLE 的搜索建议，就是当我们在输入关键词时，GOOGLE 会根据我们目前已输入的字显示相关的关键字建议，这就是搜索建议，现在很多网站都实现该友好的功能，如 YAHOO、狗狗搜索等。
实现该功能的思路就是：
在关键字输入框里，当用户按键弹起时，发送输入框里的字符串到服务器。
服务器根据收到客户端发来的字进入匹配搜索
将匹配用户已输入字的记录回发到客户端
客户端收到服务端的响应，输出建议。
其实就是异步回发（AJAX）。
下面是一个实例，实例实现的是搜索 SQL Server 默认数据库 Northwind 表 Customers 字段 CustomerID，当用户要输入框输入字时，返回该字段值与用户输入的字开头匹配的记录，即 CustomerID LIKE '用户已输入的字%'。
样式已设置好，显示建议的行为绝对位置，所以该行不会显示网页上的内容。
文件名：WordSuggest.aspx
源码如下：
.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WordSuggest.aspx.cs" Inherits="WordSuggest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; >
<head runat="server">
<title>无标题页</title>
<style type="text/css">
.CInput{border:solid 1px gray;width:300px}
#divSuggestions{border:solid 1px gray;width:300px;background:#fff;visibility:hidden}
#divSuggestions span{display:block;padding:3px}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>搜索建议 DEMO</h1>
<span>http://www.code-studio.net </span>
<hr />
<table style="border-collapse:collapse;"><tr><td><asp:TextBox ID="txtInput" runat="server" CssClass="CInput" onkeyup="sendRqt(this)"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Submit" /></td></tr>
<tr style="position:absolute;"><td><div id="divSuggestions"></div></td></tr></table>
</div>
</form>
<script type="text/javascript">
var xhr;
var isIe=window.navigator.appName.indexOf("Netscape") == -1?true:false;
function $(sElmId){return document.getElementById(sElmId);}
function crtRqt(){
if(window.ActiveXobject)
xhr=new ActiveXObject("Microsoft.XMLHTTP");
else xhr=new XMLHttpRequest();
}
function sendRqt(srcElm){
var sInput=srcElm.value;
if(sInput!=""){
var url="wordsuggest.aspx?t="+new Date().getTime()+"&w="+sInput;
crtRqt();
xhr.onreadystatechange=hdlRsp;
xhr.open("GET",url,true);
xhr.send(null);
}
else $("divSuggestions").style.visibility="hidden";
}
function hdlRsp(){
if(xhr.readyState==4&&xhr.status==200){
var rspText=xhr.responseText;
var oDiv=$("divSuggestions");
if(rspText!=""){
var arrRspText=xhr.responseText.split(',');
var sInnerHtml="";
for(var i=0;i<arrRspText.length;++i){
sInnerHtml+="<span onmouseover='setStyle(this,true)' onmouseout='setStyle(this,false)'"
+" onclick='setInput(this)'>"+arrRspText[i]+"</span>";
}
oDiv.innerHTML=sInnerHtml;
oDiv.style.visibility="visible";
}
else oDiv.style.visibility="hidden";
}
}
function setStyle(srcElm,bOver){
srcElm.style.background=bOver?"orange":"";
}
function setInput(srcElm){
$("<%=txtInput.ClientID %>").value=srcElm.innerHTML;
}
</script>
</body>
</html>
.CS
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
public partial class WordSuggest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string strInput = string.IsNullOrEmpty(Request.QueryString["w"]) ? string.Empty : Request.QueryString["w"];
if (strInput.Trim().Length != 0)
{
Suggeste(strInput);
}
}
private void Suggeste(string originalStr)
{
/* 搜索建议
* 文件名: WordSuggest.aspx
* 功能描述: 根据用户输入,在数据库 Northwind 的表 Customers 查找 CustomerID 字段值匹配的记录.
*/
SqlConnection conn = new SqlConnection("data source=localhost;database=northwind;user id=sa;password=你的密码");
string cmdText = "SELECT TOP 10 CustomerID FROM Customers WHERE CustomerID LIKE @w";
SqlParameter para = new SqlParameter("@w", string.Format("{0}%", originalStr));
SqlCommand cmd = new SqlCommand();
cmd.Connection = conn;
cmd.CommandText = cmdText;
cmd.Parameters.Add(para);
conn.Open();
SqlDataReader reader = cmd.ExecuteReader();
System.Text.StringBuilder sb = new System.Text.StringBuilder();
while (reader.Read())
{
sb.AppendFormat("{0},", reader[0]);
}
reader.Close();
conn.Close();
Response.ContentType = "text/plain";
Response.Clear();
if (sb.Length != 0)
{
Response.Write(sb.ToString().Remove(sb.Length - 1));
}
else
{
Response.Write(string.Empty);
}
Response.Flush();
Response.Close();
}
}
实现该功能的思路就是：
在关键字输入框里，当用户按键弹起时，发送输入框里的字符串到服务器。
服务器根据收到客户端发来的字进入匹配搜索
将匹配用户已输入字的记录回发到客户端
客户端收到服务端的响应，输出建议。
其实就是异步回发（AJAX）。
下面是一个实例，实例实现的是搜索 SQL Server 默认数据库 Northwind 表 Customers 字段 CustomerID，当用户要输入框输入字时，返回该字段值与用户输入的字开头匹配的记录，即 CustomerID LIKE '用户已输入的字%'。
样式已设置好，显示建议的行为绝对位置，所以该行不会显示网页上的内容。
文件名：WordSuggest.aspx
源码如下：
.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WordSuggest.aspx.cs" Inherits="WordSuggest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; >
<head runat="server">
<title>无标题页</title>
<style type="text/css">
.CInput{border:solid 1px gray;width:300px}
#divSuggestions{border:solid 1px gray;width:300px;background:#fff;visibility:hidden}
#divSuggestions span{display:block;padding:3px}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>搜索建议 DEMO</h1>
<span>http://www.code-studio.net </span>
<hr />
<table style="border-collapse:collapse;"><tr><td><asp:TextBox ID="txtInput" runat="server" CssClass="CInput" onkeyup="sendRqt(this)"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Submit" /></td></tr>
<tr style="position:absolute;"><td><div id="divSuggestions"></div></td></tr></table>
</div>
</form>
<script type="text/javascript">
var xhr;
var isIe=window.navigator.appName.indexOf("Netscape") == -1?true:false;
function $(sElmId){return document.getElementById(sElmId);}
function crtRqt(){
if(window.ActiveXobject)
xhr=new ActiveXObject("Microsoft.XMLHTTP");
else xhr=new XMLHttpRequest();
}
function sendRqt(srcElm){
var sInput=srcElm.value;
if(sInput!=""){
var url="wordsuggest.aspx?t="+new Date().getTime()+"&w="+sInput;
crtRqt();
xhr.onreadystatechange=hdlRsp;
xhr.open("GET",url,true);
xhr.send(null);
}
else $("divSuggestions").style.visibility="hidden";
}
function hdlRsp(){
if(xhr.readyState==4&&xhr.status==200){
var rspText=xhr.responseText;
var oDiv=$("divSuggestions");
if(rspText!=""){
var arrRspText=xhr.responseText.split(',');
var sInnerHtml="";
for(var i=0;i<arrRspText.length;++i){
sInnerHtml+="<span onmouseover='setStyle(this,true)' onmouseout='setStyle(this,false)'"
+" onclick='setInput(this)'>"+arrRspText[i]+"</span>";
}
oDiv.innerHTML=sInnerHtml;
oDiv.style.visibility="visible";
}
else oDiv.style.visibility="hidden";
}
}
function setStyle(srcElm,bOver){
srcElm.style.background=bOver?"orange":"";
}
function setInput(srcElm){
$("<%=txtInput.ClientID %>").value=srcElm.innerHTML;
}
</script>
</body>
</html>
.CS
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
public partial class WordSuggest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string strInput = string.IsNullOrEmpty(Request.QueryString["w"]) ? string.Empty : Request.QueryString["w"];
if (strInput.Trim().Length != 0)
{
Suggeste(strInput);
}
}
private void Suggeste(string originalStr)
{
/* 搜索建议
* 文件名: WordSuggest.aspx
* 功能描述: 根据用户输入,在数据库 Northwind 的表 Customers 查找 CustomerID 字段值匹配的记录.
*/
SqlConnection conn = new SqlConnection("data source=localhost;database=northwind;user id=sa;password=你的密码");
string cmdText = "SELECT TOP 10 CustomerID FROM Customers WHERE CustomerID LIKE @w";
SqlParameter para = new SqlParameter("@w", string.Format("{0}%", originalStr));
SqlCommand cmd = new SqlCommand();
cmd.Connection = conn;
cmd.CommandText = cmdText;
cmd.Parameters.Add(para);
conn.Open();
SqlDataReader reader = cmd.ExecuteReader();
System.Text.StringBuilder sb = new System.Text.StringBuilder();
while (reader.Read())
{
sb.AppendFormat("{0},", reader[0]);
}
reader.Close();
conn.Close();
Response.ContentType = "text/plain";
Response.Clear();
if (sb.Length != 0)
{
Response.Write(sb.ToString().Remove(sb.Length - 1));
}
else
{
Response.Write(string.Empty);
}
Response.Flush();
Response.Close();
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 搜索建议(Searching Suggestion)，已布置好样式
- 搜索建议(Searching Suggestion)，已布置好样式
- 搜索建议样式
- 百度联盟新推出“创新搜索样式”为站长谋福利
- Suggestion(搜索建议)产品和技术
- 好用的有多种样式的搜索界面创建UISearchBar
- 产品--关于搜索建议的两点小问题
- 1.MVC框架复习 2.Ajax加强 3.搜索建议 4，三级联动 5、刷新分页 6、Ajax局部动态更新数据
- (经典)分页组件，3种不同样式的分页效果，数字，按钮，标题搜索等功能
- 创建3721样式的Google搜索扩展
- 搜索引擎中关键字搜索建议的实现（内附小Demo）
- 【百度地图API】如何使用suggestion--下拉列表方式的搜索建议
- 企业网站图文搜索结果优化建议分享-www.bjrp.com
- 利用MVC框架和Ajax(完成类似百度搜索建议)
- Android 百度地图 SDK v3_3_0 （五） ---POI搜索和在线建议查询功能
- 灵活布置、可二次开发的乌云公开漏洞及知识库搜索
- 心愿作品——图片搜索系统（功能可用了，下一步布置到公网。笔记更新...）
- Solr suggest 搜索建议功能 配置问题
- 您对超人搜索有什么建议？
- Android搜索建议（搜索联想）