在頁面中，用戶可以通過關鍵字的搜索功能搜索博文。可以實現類似百度和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 }

自此，搜索功能基本實現，實現多關鍵字查找。

不足之處：未對搜索算法進行優化，頁面的布局和設計還未完善，會在以后不斷完善它。

?

轉載于:https://www.cnblogs.com/suguoqiang/archive/2012/05/07/2487373.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的我的博客网站开发6——博文关键字搜索的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。