如何应用背景颜色搜索高亮单词jQuery DataTable

Question

I have a grid view control in that columns have header html textbox using for search when i am searching grid view items i need to apply color for that how can i apply color for searching words.

My code:

<asp:TemplateField HeaderText="Element" Visible="true" HeaderStyle-Width="30%" ItemStyle-Width="30%">
                                    <HeaderTemplate>
                                        Speciality<br><input name="DynamicTextBox" id="txtElement" type="text" style="width: 120px" placeholder="Search Speciality" />
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <asp:Label ID="lblElement" runat="server" Text='<%#Bind("Element") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField> 



    <script>       
            $(document).ready(function () {
                $('#<%=GridView1.ClientID %>').hide();
                var values = eval('<%=Values%>');
                var InfoVal = localStorage.getItem("Info");            
                DataTable();
                SearchValue(values);
                $('#<%=GridView1.ClientID %>').show();
            });
            function bindDataTable(value) {

                $('#<%=GridView1.ClientID %> th').each(function () {
                    var title = $(this).text();
                    if (title == "Name" || title == "PName" || title == "Element") {
                        if (title == "Name"  || title == "PName") {
                            title1 = title.replace(" ", "");
                        }
                        if (title == "Element") {
                            title1 = title;
                        }
                        $(this).html(title + '<br/><input  name = "DynamicTextBox" id="txt' + title1 + '" type="text" style="width:120px" placeholder="Search ' + title + '" />');
                    }
                    else {
                        $(this).html(title + '<br/><br/>  ');
                    }
                });
            };
            var table;
            function DataTable() {
                table = $('#<%=GridView1.ClientID %>').prepend($('<thead></thead>').append($('#<%=GridView1.ClientID %>').find('tr:first'))).DataTable({
                    "paging": true,
                    "ordering": false,
                    "info": false,
                    "pageLength": 10,
                    "bLengthChange": false,
                });
                var PageVal = localStorage.getItem("PageNum");
                if (PageVal == null) {
                    PageVal = 0;
                }
                if (PageVal >= 1) {
                    PageVal = PageVal - 1;
                }
                if (PageVal == "") {
                    PageVal = 0;
                }


                table.page(PageVal).draw('page');            
                localStorage.removeItem("PageNum");
                table.columns().every(function () {
                    var that = this;
                    $('input', this.header()).on('keyup change', function () {
                        if (that.search() !== this.value) {
                            that
                                .search(this.value).draw();
                        }
                    });
                });

            };
            function SearchValue(values) {
                if (values != null || values != "") {
                    if (typeof values !== "undefined") {
                        var i = values[0];
                        $('#txtElement').val(i);
                        var j = values[1];
                        $('#txtName').val(j);
                        var k = values[2];
                        $('#txtName').val(k);

                        table.columns().every(function () {
                            var that = this;
                            $('input', this.header()).load('keyup change', function () {
                                if (that.search() !== this.value) {
                                    that
                                        .search(this.value).draw();
                                }
                            });
                        });
                    }
                }
            };


            var idClicked;
            $(function () {
                $('#<%=TextBoxContainer.ClientID %>').click(function (e) {
                    idClicked = "Clicked";
                    var info = table.page.info();
                    var currPag = info.page + 1;
                    var All = info.pages;

                    if (currPag != 0 || currPag <= All) {
                        localStorage.setItem("PageNum", "");
                        localStorage.setItem("PageNum", currPag);
                        localStorage.setItem("Info", "Clicked");
                    }
                });
            });

        </script> 

Answer 1

Here is a small example of how you do it.

 var text = $("#textBox").html(); var word = "it"; var wordRegExp = new RegExp("it", "gi"); text = text.replace(wordRegExp, '<span class="highlighted">' + word + '</span>'); $("body").html(text); 

 .highlighted { background: yellow; } 

 <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="textBox"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </body>