jQuery: How to highlight text within an input box?

Question

I'd like to know how to highlight some text within an input box; simple example, let's say I want to highlight all the terms starting by "@" while typing.

All the terms are retrieved from a remote autocomplete suggestions list.

The problem I'm facing is this input box, because I can't add html tags around the text and therefore can't make css on those specific terms...

Thanks for your help !

Cheers!

Answer 1

This, I hope, is what your after.

First take a look at highlightTextarea. Made by Julien L

With this you can do the following:

$("textarea").highlightTextarea({
    words: ["\\B@\\w+"],
    color: "lightblue",
    id: "mark"
});

The regex \\B@\\w+ assert position at an non word boundary (\B), followed by a @ and matches everything that falls under \w.

DEMO