我的博客网站开发6——博文关键字搜索

在页面中,用户可以通过关键字的搜索功能搜索博文。可以实现类似百度和Google的页面搜索功能,可实现多个关键字的搜索。搜索后,在搜索的结果中有关键字的高亮度的提示如:

在搜索的结果页面,模仿Google的搜索页面的快照功能,实现简单的快照查看搜索博文的功能。点击搜索页的快照按钮,页面右侧会出现博文的内容,如:

搜索页的基本功能实现。

接下来就是功能逻辑代码的实现部分。

首先要解决一个基本的问题就是:如何传送多个关键字进行查询。

我最初的想法是既然是多个关键字的搜索,类似百度和Google的搜索的话,我感觉就应该用一个数组来装载这些关键字,加以区分这些关键字的是空格,然后将其使用spilit函数对字符串进行拆分分割,使用数组对分割后的关键字装载。装载后的数组进行字符串的拼凑形成SQL语句,传回数据库进行模糊查询。

首先在博客首页的搜索功能中输入关键字,如:

C#代码:

 1  string SQLstr; //拼凑SQL语句
 2             string keyword = Server.UrlDecode(Request.QueryString["keyword"]);//接收原跳转页面传回的关键字字符串
 3             char[] separator={' '};
 4             string[] keywordArray = keyword.Split(separator);
 5             DataTable dt_CloneKeywordSearch;//克隆dt_KeywordSearch
 6             if (keyword != null)
 7             {
 8                 SQLstr = " where  title like '%" + keywordArray[0].ToString() + "%'" + "or essayContent like'%" + keywordArray[0].ToString() + "%'";
 9                 for (int i = 1; i < keywordArray.Length; i++)
10                 {
11                     SQLstr += "or title like'%" + keywordArray[i].ToString() + "%'" + "or essayContent like'%" + keywordArray[i].ToString()+"%'";
12                 }
13                 DataTable dt_KeywordSearch = BLL.BLL_BlogSearch.Select_KeywordSearch(SQLstr);   
14             }

实现关键字的处理传回数据库查询出结果后,接下来就是数据的相关处理,包括对查询结果的数据绑定,关键字的高亮度显示。

Html代码:

View Code
 1 <div style=" background:#FFFFFF; float:left; width:50%;">
 2     <asp:GridView ID="gdv_KeywordSearch" runat="server" AutoGenerateColumns="False" 
 3         BorderStyle="None" GridLines="None" ShowHeader="False" AllowSorting="True">
 4         <Columns>
 5             <asp:TemplateField>
 6                 <ItemTemplate>
 7                 <div class="dgv_block" style=" border-bottom:dashed 1px #000000; height:auto; float:left; width:100%;">
 8                     <div style=" margin:5px 5px 5px 5px; line-height:1.2em; width:90%; float:left;">
 9                         <div id="search_title" style=" text-align:left; color:#261cdc; font-family:Verdana; font-size:14px;"><%# DataBinder.Eval(Container.DataItem, "title") %></div>
10                         <div id="search_content" style=" text-align:left; font-family:Verdana; font-size:12px; margin-top:5px;"><%# DataBinder.Eval(Container.DataItem, "essayContent")%></div>
11                         <div id="search_contentTime" style=" text-align:left;margin-top:5px;"><%# DataBinder.Eval(Container.DataItem, "essaypostTime")%></div>
12                     </div>
13                     <div class="div_QuickLook" style="width:6%; height:100%; float:right; vertical-align:middle;">
14                     <span class="QuickLook" id="<%# DataBinder.Eval(Container.DataItem, "essayId") %>" style=" color:#261cdc; font-size:14px; font-weight:bold;">快<br />照</span>
15                     </div>
16                 </div>
17                 </ItemTemplate>
18             </asp:TemplateField>
19         </Columns>
20     </asp:GridView>
21     </div>

后台CS的C#代码:

View Code
 1  for (int i = 0; i < dt_KeywordSearch.Rows.Count; i++)
 2                 {
 3                     //截取正文content前300字
 4                     string str_Content = dt_KeywordSearch.Rows[i]["essayContent"].ToString().Trim();
 5                     dt_KeywordSearch.Rows[i]["essayContent"] = RemoveHTML(str_Content.Substring(0, str_Content.Length > 300 ? 300 : str_Content.Length));//去除html标记
 6 
 7                     //关键字高亮度显示
 8                     dt_KeywordSearch.Rows[i]["title"] = keyword_tag(dt_KeywordSearch.Rows[i]["title"].ToString().Trim(), keywordArray);
 9                     dt_KeywordSearch.Rows[i]["essayContent"] = keyword_tag(dt_KeywordSearch.Rows[i]["essayContent"].ToString(), keywordArray);
10                 }
11 
12                 //查询结果数据绑定
13                 this.gdv_KeywordSearch.DataSource = dt_KeywordSearch;
14                 gdv_KeywordSearch.DataKeyNames = new string[] { "essayId" };
15                 gdv_KeywordSearch.DataBind();
16 
17         //关键字高亮度提示
18         public string keyword_tag(string str, string[] keywordArray)
19         {
20             for(int i=0;i<keywordArray.Length;i++)
21             {
22                 str = str.Replace(keywordArray[i], "<font color='#ff0000'>" + keywordArray[i] + "</font>");
23             }
24             return str;
25         }
26 
27         //摘要中去除html标记
28         public static string RemoveHTML(string Htmlstring)
29         {
30             //删除脚本   
31             Htmlstring = Regex.Replace(Htmlstring, @"<script[^>]*?>.*?</script>", "", RegexOptions.IgnoreCase);
32             //删除HTML   
33             Htmlstring = Regex.Replace(Htmlstring, @"<(.[^>]*)>", "", RegexOptions.IgnoreCase);
34             Htmlstring = Regex.Replace(Htmlstring, @"([\r\n])[\s]+", "", RegexOptions.IgnoreCase);
35             Htmlstring = Regex.Replace(Htmlstring, @"-->", "", RegexOptions.IgnoreCase);
36             Htmlstring = Regex.Replace(Htmlstring, @"<!--.*", "", RegexOptions.IgnoreCase);
37 
38             Htmlstring = Regex.Replace(Htmlstring, @"&(quot|#34);", "\"", RegexOptions.IgnoreCase);
39             Htmlstring = Regex.Replace(Htmlstring, @"&(amp|#38);", "&", RegexOptions.IgnoreCase);
40             Htmlstring = Regex.Replace(Htmlstring, @"&(lt|#60);", "<", RegexOptions.IgnoreCase);
41             Htmlstring = Regex.Replace(Htmlstring, @"&(gt|#62);", ">", RegexOptions.IgnoreCase);
42             Htmlstring = Regex.Replace(Htmlstring, @"&(nbsp|#160);", "   ", RegexOptions.IgnoreCase);
43             Htmlstring = Regex.Replace(Htmlstring, @"&(iexcl|#161);", "\xa1", RegexOptions.IgnoreCase);
44             Htmlstring = Regex.Replace(Htmlstring, @"&(cent|#162);", "\xa2", RegexOptions.IgnoreCase);
45             Htmlstring = Regex.Replace(Htmlstring, @"&(pound|#163);", "\xa3", RegexOptions.IgnoreCase);
46             Htmlstring = Regex.Replace(Htmlstring, @"&(copy|#169);", "\xa9", RegexOptions.IgnoreCase);
47             Htmlstring = Regex.Replace(Htmlstring, @"&#(\d+);", "", RegexOptions.IgnoreCase);
48 
49             Htmlstring.Replace("<", "");
50             Htmlstring.Replace(">", "");
51             Htmlstring.Replace("\r\n", "");
52             Htmlstring = HttpContext.Current.Server.HtmlEncode(Htmlstring).Trim();
53 
54             return Htmlstring;
55         }

接下来是实现鼠标经过每个结果时,显示“快照”按钮,离开时隐藏,js代码实现。

Js代码:

 1 $(".div_QuickLook").hide(); //隐藏快照标志
 2         //经过时显示快照标记,离开时隐藏
 3         $(".dgv_block").mousemove(function () {
 4             $(this).children(".div_QuickLook").show();
 5         });
 6         $(".dgv_block").mouseleave(function () {
 7             $(this).children(".div_QuickLook").hide();
 8         });
 9 
10         $(".QuickLook").hover(function () {
11             $(this).css({ "color": "#FF0000" });
12         }, function () {
13             $(this).css({ "color": "#261cdc" });
14         });

最后是点击快照时,显示文章的全部内容,其实质就是查询绑定数据。处理的小问题就是动态异步加载数据,使用Ajax实现异步刷新。

Html代码:

1  <div id="QuickLookPage" style=" float:right; width:49%; text-align:left; overflow:hidden; background:#FFFFFF;">
2     </div>

Js的Ajax实现异步加载数据:

 1 $(".QuickLook").click(function () {
 2             $("#QuickLookPage").html(""); //每次加载快照时,先清空
 3             var $essayId = $(this);
 4             $(this).parent().siblings().children("#search_title").clone().appendTo($("#QuickLookPage"));
 5             var options = {
 6                 type: "POST",
 7                 url: "BlogSearch.aspx/GetQuickLook",
 8                 data: "{essayId:" + $essayId.attr("id") + "}",
 9                 contentType: "application/json;charset=urf-8",
10                 dataType: "json",
11                 success: function (response) {
12                     $("#QuickLookPage").append("<div style='margin-top:10px; padding:0px 5px 5px 5px;'>" + response.d + "</div>");
13                 }
14             };
15             $.ajax(options);
16         });

后台CS的C#代码:

1 [WebMethod]
2         public static string GetQuickLook(string essayId)
3         {
4             DataTable dt_QuickLook = BLL.BLL_BlogSearch.Select_QuickLook(essayId);
5 
6             return dt_QuickLook.Rows[0]["essayContent"].ToString().Trim();
7         }

自此,搜索功能基本实现,实现多关键字查找。

不足之处:未对搜索算法进行优化,页面的布局和设计还未完善,会在以后不断完善它。

 

posted @ 2012-05-07 14:36  Ghost Soar  阅读(...)  评论(... 编辑 收藏