Question

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

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

突出显示我正在使用“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();
}

Answer 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;
}

Answer 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>

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

2 个答案: