Highlight letters typed in the input box

Question

I would like to highlight the text typed in the inbox , and when its found in a table column, td, then it should highlight it, otherwise remove the highlight from it.

Here is a fiddle with my code: http://jsfiddle.net/rFGWZ/6/ , try to type 21 in the text input, so 2 rows will be only visible, and I would like to select 21 in each td that is visible in the case and this is the text that was typed in the input.

I've tried many highlight scripts posted in the web, but none of them seems to work because I can not really localize the element, as this is the live query search...

Guillaume Poussel · Accepted Answer · 2012-09-15 11:05:23Z

2

You have to create a span containing only highlighted characters. I suggest you this code:

 $("table tr").each(function(index) { if (index !== 0) { $row = $(this); var firstCell = $row.children("td:first"); var id = $row.children("td:first").text(); if (id.indexOf(value) !== 0) { $row.children("td:first").text(id); $row.hide(); } else { firstCell.html($("").addClass("highlight").text(id.slice(0, value.length))); firstCell.append(id.slice(value.length, id.length)); $row.show(); } } });

Don't forget to customize .highlight rule in your CSS.

See it live!

answered Sep 15, 2012 at 11:05

Guillaume Poussel

9,8522 gold badges35 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sapp Over a year ago

Yea, its working fine but when if I would like to get the td by its class instead of the :first selector?

Guillaume Poussel Over a year ago

Your td does not have any class. If you add, for example class="unique-id" to your td, simply use $row.children("td.unique-id").

Sapp Over a year ago

Yea, but then it cut the letters intead of highlight it: jsfiddle.net/rFGWZ/14.

Guillaume Poussel Over a year ago

You can't put just "" and add class highlight on it. You have to keep <span /> in the jQuery constructor. See it: jsfiddle.net/rFGWZ/15.

Sapp Over a year ago

Thank you :)! Could you maybe help me with adding the .toLowerCase() operator in there? So I could search the data case-insensitive, in case if there will be some letters.

|

GautamD31 · Accepted Answer · 2012-09-15 11:06:11Z

0

Like this..??

if (id.indexOf(value) !== 0) { $row.hide(); } else { $row.show(); $row.css("color","red"); }

answered Sep 15, 2012 at 11:06

GautamD31

28.8k10 gold badges66 silver badges86 bronze badges

3 Comments

Guillaume Poussel Over a year ago

I think the OP wants to highlight only what the user has typed. But this could work otherwise.

GautamD31 Over a year ago

No initially they will be in black,if user typed the resultant will be in the "red"

Guillaume Poussel Over a year ago

Yes, but the whole row will be red, not only "21" with the OP example.

Collectives™ on Stack Overflow

Highlight letters typed in the input box

2 Answers 2

6 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Related