How to add highlight background to the matched array item in textarea

Question

I'm trying to highlight a matched name from user search. If the user search is in the array, the matched array item should be highlighted in the text area. How to accomplish this? Here is what I have so far.

function search() {
  var list = $('#textArea').val();
  var listArr = list.split(',');
  $('#textArea').html(listArr);
  var userSearch = $('#nameSearch').val();

  var i = 0;
  while (listArr[i]) {
    var res = listArr[i].indexOf(userSearch);
    if (res !== -1) {
      console.log(userSearch + ' is on the list.');
      //highlight matched name in textArea
    }
    i++;
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <textarea class="nameList" name="names" id="textArea" cols="30" rows="10">joe, monica, harry, hanna</textarea>
</div>
<input type="text" id="nameSearch" />
<button onclick="search()">Search By Name</button>

Here is a link to the codepen:

Codepen

Try to check out here: https://stackoverflow.com/questions/4705848/rendering-html-inside-textarea — Tomas, Aug 27 '18 at 18:12

Akrion · Answer 1 · 2018-08-27T17:59:55.750

To match the fist occurrence you need to focus the textarea first and then use setSelectionRange.

Also since setSelectionRange is not jQuery method you would need to access the html element via the 0 index e.g. $txt[0].setSelectionRange

Try something like this:

function search() {
  var $txt = $('#textArea')
  $txt.focus()
  var list = $txt.val();
  var search = $('#nameSearch').val();
  var index = list.indexOf(search);
  $txt[0].setSelectionRange(index, index + search.length);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <textarea class="nameList" name="names" id="textArea" cols="30" rows="10">joe, monica, harry, hanna</textarea>
</div>
<input type="text" id="nameSearch" />
<button onclick="search()">Search By Name</button>

It just will highlight the first match text, not for all, right :)) — Tomato32, Aug 27 '18 at 17:57

How to add highlight background to the matched array item in textarea

1 Answers1