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

要匹配第一个事件，您需要先聚焦pd.date_range(start = '2013-01-19', end = '2018-01-29' ).difference(df.index)，然后使用setSelectionRange。

此外，由于textarea不是jQuery方法，因此您需要通过0索引访问html元素，例如setSelectionRange

尝试这样的事情：

$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);
}

如何在文本区域中向匹配的数组项添加突出显示背景

1 个答案: