在页面中，用户可以通过关键字的搜索功能搜索博文。可以实现类似百度和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代码：

1 
      
        2     
       
         4         
        
          5             
         
           6                 
          
            7                 
           
             8 
            
              9 
             
              <%# DataBinder.Eval(Container.DataItem, "title") %>
             
10 
             
              <%# DataBinder.Eval(Container.DataItem, "essayContent")%>
             
11 
             
              <%# DataBinder.Eval(Container.DataItem, "essaypostTime")%>
             
12 
            
13 
            
             14 
             " style=" color:#261cdc; font-size:14px; font-weight:bold;">快
照15 
            
16 
           
17                 
          18             
         19         
        20     
       21     
      

后台CS的C#代码：

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[i] + "");23             }24             return str;25         }26 27         //摘要中去除html标记28         public static string RemoveHTML(string Htmlstring)29         {30             //删除脚本   31             Htmlstring = Regex.Replace(Htmlstring, @"
       
        ]*?>.*?", "", 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, @"
        
       
      

接下来是实现鼠标经过每个结果时，显示“快照”按钮，离开时隐藏，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  
     
      2     
     

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("
     
      " + response.d + "
     
");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         }

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

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