如何在网格中突出显示搜索的关键字答案

【问题标题】：How to Highlight searched keyword in grid如何在网格中突出显示搜索的关键字
【发布时间】：2017-04-22 15:19:34
【问题描述】：

我有一个网格和一个文本框，在文本框键上我正在过滤（搜索）网格数据。它的工作。

现在我想用在文本框中输入的文本来突出显示网格数据。

为了突出显示，我正在使用“jquery.highlight.js”库。

但它不能正常工作。尝试在文本框中搜索 25。

HTML:-

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>

        <style type="text/css">
            span.highlight {
                background-color: #ffffaf;
            }
        </style>

        <script src="//code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>      
        <script src="//raw.githubusercontent.com/bartaz/sandbox.js/master/jquery.highlight.js" type="text/javascript"></script>
        <script type="text/javascript">

        function Search_Gridview(strKey, strGV) {
            var strData = strKey.value.toLowerCase().split(" ");
            var tblData = document.getElementsByClassName(strGV)[0];
            var rowData;
            for (var i = 1; i < tblData.rows.length; i++) {
                rowData = tblData.rows[i].innerHTML;
                var styleDisplay = 'none';
                for (var j = 0; j < strData.length; j++) {
                    if (rowData.toLowerCase().indexOf(strData[j]) >= 0) {
                        styleDisplay = '';
                    }else {
                        styleDisplay = 'none';
                        break;
                    }
                }
                tblData.rows[i].style.display = styleDisplay;
                $('.mygrid').unhighlight();
                $('.mygrid').highlight($(strData));
            }
        }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <center>
                <div style="font-family: Aharoni; text-align: center; font-size: 30px; margin: 20px;">
                    Search in GridView using JavaScript by Code Scratcher
                </div>
                <div style="border: 1px solid Black; width: 800px; padding: 20px; height: 350px; font-size: 20px;">
                    Search :
                    <asp:TextBox ID="txtSearch" runat="server" Font-Size="20px" onkeyup="Search_Gridview(this, 'mygrid')"></asp:TextBox><br />
                    <br />
                    <asp:GridView ID="gvTest" runat="server" CellPadding="10" Width="500px" CssClass="mygrid">
                    </asp:GridView>
                </div>
            </center>
        </form>
    </body>
</html>

代码背后：

protected void Page_Load(object sender, EventArgs e)
{
    //Columns Add To DataTable...
    dt.Columns.Add("Id", typeof(int));
    dt.Columns.Add("Name", typeof(string));
    dt.Columns.Add("Age", typeof(int));
    dt.Columns.Add("City", typeof(string));
    //Rows Add To DataTable...
    dt.Rows.Add(1, "Ved", 25, "HP");
    dt.Rows.Add(2, "Sunil", 32, "HR");
    dt.Rows.Add(3, "Billa Bhai", 23, "HR");
    dt.Rows.Add(3, "OM", 25, "PB");
    dt.Rows.Add(3, "Kalol", 28, "Surat");
    //DataTable Bind To Gridview...
    gvTest.DataSource = dt;
    gvTest.DataBind();
}

【问题讨论】：

该函数需要一个字符串，而不是像 $(strData) 这样的 jQuery 对象。此外，您使用的插件没有维护（从 2010 年的最后一次提交），没有重新设置它的主节点（它是一个 fork）并且有禁用问题（您不能保证它可以工作）。看看mark.js。
它的工作我也给出了下面的解决方案，请检查

标签： c# jquery

【解决方案1】：

我之前做过类似的事情，但在代码隐藏和使用 css 中。

protected void gvRowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        for (int a = 0; a < e.Row.Cells.Count; a++)
        {
            if (e.Row.Cells[a].GetType() == typeof(DataControlFieldCell))
            {
                var fc = e.Row.Cells[a] as DataControlFieldCell;
                var st = <YOUR_SEARCH_TEXT>;
                if (fc != null && !String.IsNullOrEmpty(st) && fc.Text.Contains(st))
                {
                    var txt = fc.Text;
                    var begin = txt.Substring(0, txt.IndexOf(st));
                    var end = txt.Substring(txt.IndexOf(st) + st.Length);
                    fc.Text = begin + "<span class='matchedText'>" + st + "</span>" + end;
                }
            }
        }
    }
}

还有css：

.matchedText {
    background-color: yellow;
}

【讨论】：

【解决方案2】：

我得到了答案，下面是jquery函数：-

 <script type="text/javascript">
        function Search_Gridview(strKey, strGV) {
            $('.mygrid').unhighlight();
            var strData = strKey.value.toLowerCase().split(" ");
            var tblData = document.getElementsByClassName(strGV)[0];
            var rowData;
            for (var i = 1; i < tblData.rows.length; i++) {
                rowData = tblData.rows[i].innerHTML;
                var styleDisplay = 'none';
                for (var j = 0; j < strData.length; j++) {
                    if (rowData.toLowerCase().indexOf(strData[j]) >= 0) {
                        styleDisplay = '';                  
                    }
                    else {
                        styleDisplay = 'none';
                        break;
                    }
                }
                tblData.rows[i].style.display = styleDisplay;
                //$('.mygrid').unhighlight();
                $('.mygrid').highlight($(strData));
            }
        }
    </script>

【讨论】：

问题只是被调用的 unhilight 函数吗？
是的，它的 unhighlight 功能在错误的地方