CODEWITHSUNDEEP
javascriptjquerytextarea
user1360479
user1360479

Reputation: 13

Highlight textarea based on user given keywords

I have successfully used below script to get predefined text highlighted in the textarea. http://www.strangeplanet.fr/work/jquery-highlighttextarea/

How it is possible to get the predefined text to be changed on the fly? E.g. user write "green" in specific input box and then "green-words" are highlighted in textarea?

Upvotes: 0

Views: 1966

Answers (4)

coolguy
coolguy

Reputation: 7954

$("#input-id").bind('keypress',function () {
    var word = $(this).val();
    if (word) {
        $("textarea").highlightTextarea({
            words: [word]
        });
    }
});

Upvotes: 0

tuoxie007
tuoxie007

Reputation: 1236

$("#input-id").keydown (function () {
    var word = $(this).val();
    if (word) {
        word += '-words';
        $("textarea").highlightTextarea({
            words: [word]
        });
    }
});

Upvotes: 0

Mitch Satchwell
Mitch Satchwell

Reputation: 4830

Hook into the keydown event of the input box and change the words array.

I have never used the jQuery plugin you linked to but something like this should work:

$("#target").keydown (function () {
    $("textarea").highlightTextarea({
          words: [$(this).val()]
    });
});

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

Maybe you could try something like

<input type="text" id="wordtohighlight">
<textarea>lorem ipsum green sit dolor amet green</textarea>

Js/jQuery

$('#wordtohighlight').on('change', function() {
    var v = $(this).val();
    $("textarea").highlightTextarea({
         words: [v]
    });
}

With this code snippet you call the plugin when input changes (e.g. when input text loses focus/you click elsewhere on the page) . If you prefer you could try to use keyup event

Upvotes: 1

Related Questions