Как добавить выделенный фон для соответствующего элемента массива в textarea

Question

Я пытаюсь выделить совпадающее имя в поиске пользователя. Если пользовательский поиск выполняется в массиве, соответствующий элемент массива должен быть выделен в текстовой области. Как это сделать? Вот что у меня есть.

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>

Вот ссылка на кодовый блок:

Codepen

Answer 1

Чтобы соответствовать первому вхождению, вам нужно сначала сфокусировать textarea, а затем использовать setSelectionRange .

Кроме того, поскольку setSelectionRange не является методом jQuery, вам необходимо получить доступ к элементу html через индекс 0, например. $txt[0].setSelectionRange

Попробуйте что-то вроде этого:

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>