jQuery ทำ highlight ขัอมูลใน GridView

ผมเคยทำโปรแกรมค้นหาข้อมูลจากไฟล์เอกสารที่เก็บไว้ใน File Server โดย user สามารถใส่ key word ได้หลายตัว จากนั้นโปรแกรมจะไปค้นหาว่ามีไฟล์ไหนบ้างที่มีคำหรือประโยคตรงกับเงื่อนไขที่ต้องการ แล้วนำข้อมูลรวมถึง url มาใส่ใน GridView
ทีนี้ user ก็ต้องการให้โปรแกรมสามารถ highlight คำหรือประโยคใน GridView ที่ตรงกับ key word ด้วย ซึ่งก่อนหน้านี้ผมก็เขียน javascript วนลูปเพื่อทำ highlight ซึ่งโค้ดก็ยาวพอสมควร วันนี้จะลองมา modify โดยใช้ jQuery มาช่วยครับ โดยผมจะเพิ่ม Custom Attribute ให้กับ Control ที่ต้องการจะไปทำ highlight ครับ ซึ่งในแต่ละแถวของ GridView จะให้ไป highlight ที่ label 2 ตัว

<asp:TemplateField HeaderText="Title" HeaderStyle-Width="400px" HeaderStyle-HorizontalAlign="Left"> 
     <ItemTemplate>
          <asp:Label ID="lblDocTitle" runat="server"    ForeColor="Blue" style="font-size: 10pt" Highlight="true"  Font-Bold="False"><%# eval("DocTitle") %></asp:Label>
     </ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Abstract" HeaderStyle-Width="300px" HeaderStyle-HorizontalAlign="Left">
     <ItemTemplate>
          <asp:Label ID="lblAbstract" runat="server"  Highlight="true" ><%# eval("Abstract") %></asp:Label>
     </ItemTemplate>
</asp:TemplateField>

เนื่องจากผมใช้ ScriptManager และ UpdatePanel ด้วย จากบทความเก่าผมใช้วิธีเขียนคำสั่ง jQuery ที่ code behind แล้วสั่ง ScriptManager ให้ Register Script ให้ ตามตำราเรียกวิธีนี้ว่าเป็น Server-centric แต่คราวนี้เราจะมาลองทำ Client-centric ดูบ้าง แทนที่เราจะใช้ UpdateProgress Control ผมก็จะมาใช้ PageRequestManager ในการแสดงรูปภาพแทน รวมถึงทำการ register event handler function ครับ

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<script type="text/javascript" id="MSAjax">
     var prm = Sys.WebForms.PageRequestManager.getInstance();
     prm.add_beginRequest(beginRequest);
     prm.add_pageLoaded(pageLoaded);

     function beginRequest(sender, args) {
         $("#divProgress").show();
         $("#MainGridView").html("");
     }

     function pageLoaded(sender, args) {
         //Add elements'event handler.
         $("txtFreeText").keypress(function(e) { txtFreeText_OnKeyPress(e); });
         $("btnSearch").click(function() { ValidateSearch(); });
         $("#divProgress").hide();
                
         HighlightSearch();
    } 
</script> 

คราวนี้มาลองดูโค้ดที่สำหรับทำ Highlight กันครับ

    <style type="text/css">
        .highlight{font-weight: bold; font-size: 16px; color: blue; background-color: papayawhip};
    </style>
    <script type="text/javascript" src="Scripts/jquery-1.3.2-vsdoc.js"></script>  

  
    <script type ="text/javascript" id="MainScript">
       
        function trim(str) {
            return str.replace(/^\s*|\s*$/g, "");
        }  
          
        function HighlightSearch(){
            var strSearch = $("#txtFreeText").val();
            if (trim(strSearch)=="") return false;
       
            strSearch = strSearch.replace(/\"/gi,"");
            strSearch = strSearch.replace(/\s*and\s*/gi, " ");
            strSearch = strSearch.replace(/\s*or\s*/gi," ");
            var arrSearch = strSearch.split(" ");

            $("[Highlight=true]").each(function() {
            var elm = $(this);
            var strAbstarct = elm.html();
            for (var i = 0; i < arrSearch.length; i++) {
                var RE = new RegExp(arrSearch[i], "gi");
                strAbstarct = strAbstarct.replace(RE, "<span class='highlight'>" + arrSearch[i] + "</span>");
            }
            elm.html(strAbstarct) 
            });
        }

    </script>

จากโค้ดด้านบน ผมใช้ Attribute Selector ในการเลือก element ที้ต้องการทำ Highlight มาจากนั้นมาวนลูปด้วย jQuery.each() ครับ แล้วก็ไปแก้ไข้ html ของ element ให้เพิ่ม span เพิ่อทำ highlight คำที่ต้องการ ลองรันดูได้ผลลัพธ์ตามต้องการครับ