javascript - jQuery突出显示搜索词的文本

Question

我想突出显示（或背景颜色）过滤行中搜索词的输入文本 $('#Search').val()。我试图用跨度包装它，添加一个类并直接添加 CSS - 不工作......

搜索框（输入）的 id="Search"

<p>
<span>Search:</span>
<input type="text" id="Search" name="Search" maxlength="20" placeholder="Search" />
</p>

表 id="vw"

<table id='<?php echo $vw;'>
 <thead>
  <tr>
   <th>
   <th>
   <th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>
   <td>
   <td>
  </tr>
 </tbody>
</table>

$('#Search').keyup(function() {
    // only search when there are 3 or more characters in the textbox  
    if ($('#Search').val().length > 2) {
       // hide all rows
       $('#' + vw + ' tr').hide();
       // show the header row
       $('#' + vw + ' tr:first').show();
       // show the matching rows (using the containsNoCase)
       $('#' + vw + ' tr td:containsNoCase(\'' + $('#Search').val() + '\')').parent().show();

       // HERE - Want to hightlight(or background-color) the input text $('#Search').val() in the filtered row

       // change css class to show all white records
       $('#' + vw + ' tr:nth-of-type(odd)').css('background', '#fff');

    } else if ($('#Search').val().length == 0) {
       // if the user removed all of the text, reset the search
       resetSearch();
    }

标签： javascriptjquerycss