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

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

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

搜索页的基本功能实现。

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

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

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

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

C#代码：

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

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

Html代码：

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

后台CS的C#代码：

 for (int i = 0; i < dt_KeywordSearch.Rows.Count; i++)
                {
                    //截取正文content前300字
                    string str_Content = dt_KeywordSearch.Rows[i]["essayContent"].ToString().Trim();
                    dt_KeywordSearch.Rows[i]["essayContent"] = RemoveHTML(str_Content.Substring(0, str_Content.Length > 300 ? 300 : str_Content.Length));//去除html标记

                    //关键字高亮度显示
                    dt_KeywordSearch.Rows[i]["title"] = keyword_tag(dt_KeywordSearch.Rows[i]["title"].ToString().Trim(), keywordArray);
                    dt_KeywordSearch.Rows[i]["essayContent"] = keyword_tag(dt_KeywordSearch.Rows[i]["essayContent"].ToString(), keywordArray);
                }

                //查询结果数据绑定
                this.gdv_KeywordSearch.DataSource = dt_KeywordSearch;
                gdv_KeywordSearch.DataKeyNames = new string[] { "essayId" };
                gdv_KeywordSearch.DataBind();

        //关键字高亮度提示
        public string keyword_tag(string str, string[] keywordArray)
        {
            for(int i=0;i<keywordArray.Length;i++)
            {
                str = str.Replace(keywordArray[i], "<font color='#ff0000'>" + keywordArray[i] + "</font>");
            }
            return str;
        }

        //摘要中去除html标记
        public static string RemoveHTML(string Htmlstring)
        {
            //删除脚本   
            Htmlstring = Regex.Replace(Htmlstring, @"<script[^>]*?>.*?</script>", "", RegexOptions.IgnoreCase);
            //删除HTML   
            Htmlstring = Regex.Replace(Htmlstring, @"<(.[^>]*)>", "", RegexOptions.IgnoreCase);
            Htmlstring = Regex.Replace(Htmlstring, @"([\r\n])[\s]+", "", RegexOptions.IgnoreCase);
            Htmlstring = Regex.Replace(Htmlstring, @"-->", "", RegexOptions.IgnoreCase);
            Htmlstring = Regex.Replace(Htmlstring, @"<!--.*", "", RegexOptions.IgnoreCase);

            Htmlstring = Regex.Replace(Htmlstring, @"&(quot|#34);", "\"", RegexOptions.IgnoreCase);
            Htmlstring = Regex.Replace(Htmlstring, @"&(amp|#38);", "&", RegexOptions.IgnoreCase);
            Htmlstring = Regex.Replace(Htmlstring, @"&(lt|#60);", "<", RegexOptions.IgnoreCase);
            Htmlstring = Regex.Replace(Htmlstring, @"&(gt|#62);", ">", RegexOptions.IgnoreCase);
            Htmlstring = Regex.Replace(Htmlstring, @"&(nbsp|#160);", "   ", RegexOptions.IgnoreCase);
            Htmlstring = Regex.Replace(Htmlstring, @"&(iexcl|#161);", "\xa1", RegexOptions.IgnoreCase);
            Htmlstring = Regex.Replace(Htmlstring, @"&(cent|#162);", "\xa2", RegexOptions.IgnoreCase);
            Htmlstring = Regex.Replace(Htmlstring, @"&(pound|#163);", "\xa3", RegexOptions.IgnoreCase);
            Htmlstring = Regex.Replace(Htmlstring, @"&(copy|#169);", "\xa9", RegexOptions.IgnoreCase);
            Htmlstring = Regex.Replace(Htmlstring, @"&#(\d+);", "", RegexOptions.IgnoreCase);

            Htmlstring.Replace("<", "");
            Htmlstring.Replace(">", "");
            Htmlstring.Replace("\r\n", "");
            Htmlstring = HttpContext.Current.Server.HtmlEncode(Htmlstring).Trim();

            return Htmlstring;
        }

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

Js代码：

$(".div_QuickLook").hide(); //隐藏快照标志
        //经过时显示快照标记,离开时隐藏
        $(".dgv_block").mousemove(function () {
            $(this).children(".div_QuickLook").show();
        });
        $(".dgv_block").mouseleave(function () {
            $(this).children(".div_QuickLook").hide();
        });

        $(".QuickLook").hover(function () {
            $(this).css({ "color": "#FF0000" });
        }, function () {
            $(this).css({ "color": "#261cdc" });
        });

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

Html代码：

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

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

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

后台CS的C#代码：

[WebMethod]
        public static string GetQuickLook(string essayId)
        {
            DataTable dt_QuickLook = BLL.BLL_BlogSearch.Select_QuickLook(essayId);

            return dt_QuickLook.Rows[0]["essayContent"].ToString().Trim();
        }

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

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