突出搜索文字与jquery

我试图实施搜索表，我在网上找到了答案，我试了一下，它工作正常！突出搜索文字与jquery

现在我想强调（改变文本颜色：文本颜色类=蓝色文本）该搜索关键字表格单元格中，我寻找这个答案，但我没有发现任何有用的！

我的HTML是

<table class="stdtable"> 
    <tr> 
    <td id="stdname">Name</td> 
    <td id="stdreg">Reg. No.</td> 
    <td id="stdparent">Parent</td> 
    <td id="stdgrp">Group</td> 
    <td id="action">Action</td> 
    </tr> 
</table>

和jQuery是

$("#filter").on("keyup", function() { 
    var searchKey = $(this).val().toLowerCase(); 
    $(".stdtable tr #stdname").each(function() { 
     var searchStr = $(this).text().toLowerCase(); 
     if (searchStr.indexOf(searchKey)!=-1) { 
      $(this).parent().show(); 
     } 
     else { 
      $(this).parent().hide(); 
     } 
    }); 
});

我怎么能凸显搜索文本？如果我搜索ñ文本在名称无应该改变颜色

，如果我清除搜索字段我需要清除的文字颜色也

来源

2017-04-07 Rak_code

剥离跨度声明试试[大关。 JS]（https://markjs.io/）？ – dude

我不知道设置你有，但我会做一个类“突出显示” 并给这个类的属性：color: blue;或任何其他CSS特性你想要的特殊结果。然后

$("#stdname").addClass("highlighted");

和

$("#stdname").removeClass("highlighted");

当您删除搜索字段

编辑：离开上面有人希望所有的文字。

你可以采取

var s = $(this).val(); 
var txt = $("#stdname").val().replace(s, '<span style="color: blue">' + s + '</span>'); 
$("#stdname").val(txt);

请注意，你要结束了奇怪的行为，如果你不从$("#stdname").val()每次关键是高达

来源

2017-04-07 21:49:24

不适用于整个字符串！只有那些我正在搜索的文字 –

我修正了它。尝试类似的东西，它应该能够改变颜色。为了清除，您必须删除span语句并将其替换为''>>“'跨度之间的字符串。 –

突出搜索文字与jquery

回答

相关问题