需要在搜索中突出显示字母[重复]答案

【问题标题】：Need to high light letters on search [duplicate]需要在搜索中突出显示字母[重复]
【发布时间】：2017-04-22 05:01:22
【问题描述】：

Here 是我搜索和工作良好的小提琴，但我想更改现有代码以突出显示字母背景而不是总单词。只有字母背景突出显示............

在此代码中进行更改............

$("#search").keyup(function() {
  value = $(this);
  if (value.val() == "") {
    $.each($("#ftz-table tbody tr td"), function() {
      $(this).css('background-color', 'rgba(0,0,0,0)');
    })
    return;
  }
  $.each($("#ftz-table tbody tr td"), function() {
    if (!($(this).text().toLowerCase().indexOf($(value).val().toLowerCase()) == -1)) {
      $(this).css("background-color", "red");
    } else {
      $(this).css("background-color", "rgba(0,0,0,0)");
    }
  });
});

【问题讨论】：

到目前为止你做了什么，因为这看起来就像你拿了一段代码，并希望在没有实际做任何事情的情况下得到一段工作代码
Stack Overflow 是一个问答网站，而不是代码编写服务。

标签： javascript jquery html

【解决方案1】：

改变这个：

$(this).css("background-color", "red");

进入这个：

$(this).css("color", "red");

【讨论】：

【解决方案2】：

我更新了你的JSFiddle

你应该替换所有的

$(this).css('background-color','rgba(0,0,0,0)');

与

$(this).css('color', 'white');

和

$(this).css('background-color','red');

与

$(this).css('color', 'red');

【讨论】：

字母不应该改变颜色......字母的背景颜色应该改变......

【解决方案3】：

应该这样做：

if(!($(this).text().toLowerCase().indexOf(searched_term) == -1)){
    $(this).html(original_text.replace(searched_term, "<mark style='background: yellow'>"+searched_term+"</mark>"));
}   
else{
    $(this).text($(this).text());   
}

基本上这个想法是用 html 元素替换搜索的词，以便我们可以使用 css 轻松突出显示它。

在此处演示：https://jsfiddle.net/h6tsdq0w/6/

【讨论】：

谢谢......但是如果我们在搜索框中输入一些内容，复选框就会丢失......你能解决它吗
@KoteswaraRao 修复了它jsfiddle.net/h6tsdq0w/6
@KoteswaraRao 将小提琴更新到最新版本。第六版是正确的
非常感谢@aelor.......
它会破坏事件并触发 DOM 的再生！