Wie man Hintergrundfarbe für Suche highlited Wörter anwendet Jquery DataTable

Question

Ich habe eine Rasteransicht Kontrolle in diesen Spalten haben Header HTML-Textfeld mit für die Suche, wenn ich Rasteransicht Elemente suchen muss ich Farbe für das anwenden, wie kann ich Farbe für anwenden Wörter suchen.

Mein 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

Hier ist ein kleines Beispiel dafür, wie Sie es tun.

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>