ハイライトされた単語を検索するための背景色を適用する方法Jquery DataTable

グリッドビューコントロールを持っているので、その列にヘッダーhtmlテキストボックスがあります。グリッドビュー項目を検索しているときに検索用に使用します。単語を検索する。ハイライトされた単語を検索するための背景色を適用する方法Jquery DataTable

マイコード：ここで

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

出典

2017-01-20 Ben805

あなたは言葉を見つけたときのスタイルを追加しますか？ – Interactive

こんにちは@インタラクティブ、これを行う方法を教えてください – Ben805

は、あなたがそれを行う方法の小さな一例です。

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>

出典

2017-01-20 09:00:29

こんにちは@Abdelaziz Mokhnache、私はあなたの答えを教えてください私のコードに適用することができます。どこに '' – Ben805

こんにちは@Abdelaziz Mokhnache、それは私のために働いていない – Ben805

確かにそれは動作しません。 '＃textBox'を検索結果コンテナの' id'に置き換え、 'word'を検索したい単語に置き換えなければなりません。 –

ハイライトされた単語を検索するための背景色を適用する方法Jquery DataTable

答えて

関連する問題