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

Posted 2023-03-06

【中文标题】需要在搜索中突出显示字母[重复]

【英文标题】：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 是一个问答网站，而不是代码编写服务。

【参考方案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 的再生！