Question

I’m trying to highlight table cells as text is typed into an input.

My code is:

$(document).ready(function() {
   $('#search').keyup(function() {

     var value = $('#search').val();
     $('td:contains(value)').css({'border-color':'red'});

  });
});

I don’t understand why this is not working, please help me understand!

EDIT: #search is a text input where the search term is entered.

Answer 1

You’re searching for the string value, not for the contents of the variable value. Use concatenation to put the variable’s value into your selector:

$('td:contains(' + value + ')').css({'border-color':'red'});

---

Edit:

You also need to set the other border properties:

$('td:contains(' + value + ')').css({border: 'red 1px solid'});

Note also that this has fairly odd behaviour. The moment I type a letter into the input box, this code will highlight every td that contains that letter. Deleting the contents of the input has no effect. If you want a different effect, you’ll have to say what it is. Whole words, perhaps?