Need to high light letters on search

Question

Here is the fiddle where i have search and working good but i want to change the existing code for getting letters background highlighted not total word. only letters background highlight........

Make changes in this code........

$("#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)");
    }
  });
});

What did you try so far, cause this just looks like you took a piece of code, and hope to get a working piece of code without actually doing anything — Icepickle, Dec 07 '16 at 10:26
Stack Overflow is a question and answer site, not a code-writing service. — secelite, Dec 07 '16 at 10:46

score 0 · Answer 1 · answered Dec 07 '16 at 09:59

0

Change this:

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

into this:

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

answered Dec 07 '16 at 09:59

Akhter Al Amin

852
1
11
25

score 0 · Answer 2 · answered Dec 07 '16 at 10:03

0

I updated your JSFiddle

You should replace all your

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

with

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

and

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

with

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

answered Dec 07 '16 at 10:03

Weedoze

13,683
1
33
63

letters should not change color...... background color of letter should change...... – Koteswara Rao Dec 07 '16 at 10:05

aelor · Accepted Answer · 2016-12-07T10:45:59.407

-1

This should do it:

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());   
}

Basically the idea is to replace the searched term with an html element so that we can highlight it easily with css.

demo here: https://jsfiddle.net/h6tsdq0w/6/

edited Dec 07 '16 at 10:45

answered Dec 07 '16 at 10:30

aelor

10,892
3
32
48

Thank you...... but the check boxes are missing if we type something in the search box....... can u please fix it – Koteswara Rao Dec 07 '16 at 10:34
@KoteswaraRao fixed it https://jsfiddle.net/h6tsdq0w/6/ – aelor Dec 07 '16 at 10:45
@KoteswaraRao updated the fiddle to the latest version. 6th version is the correct one – aelor Dec 07 '16 at 10:48
Thank you very much @aelor....... – Koteswara Rao Dec 07 '16 at 10:55
It will destroy events and triggers regeneration of the DOM! – dude Dec 07 '16 at 14:07
@dude there are no events attached to the tds in particular. Don't know which events you are concerned about. – aelor Dec 08 '16 at 06:10

Need to high light letters on search

3 Answers3