Jquery 搜索字符串

Question

我有一个输入文本框，供用户通过名字、姓氏或全名搜索另一个用户，如果找到名字，则隐藏不匹配的名字或给找到的名字上色。 我的结构看起来

const userSerach = ($("#userId").val() || '').toLowerCase();

const usersInRow = $(this).find('td').eq(6);
const users = usersInRow[0].innerText;
const userFound = users.substring(users.contains(userSerach)).toLowerCase();
if (userFound.length > 0) {
  $(userFound).css('color', 'red');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control" id="userId" placeholder="Search by user's name" value="">
<dl>
  <dt>ADMINISTRATORs (<span style="color: red;">3</span>)</dt>
  <dd>Louis,Edward</dd>
  <dd>Gary,Anthony</dd>
  <dd>Carlson,Matthew</dd>
</dl>

Answer 1

据我了解，您想将匹配的文本搜索到

<dd>

中并突出显示它们

你可以这样做：

$('#userId').mouseout(function() {
  userSerach = ($("#userId").val() || '').toLowerCase();
  $('dl dd').each(function() {
    if ($(this).text().toLowerCase().indexOf(userSerach) > -1) {
      $(this).css('color', 'red');
    } else {
      $(this).css('color', 'black');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control" id="userId" placeholder="Search by user's name" value="">
<dl>
  <dt>ADMINISTRATORs</dt>
  <dd>Louis,Edward</dd>
  <dd>Gary,Anthony</dd>
  <dd>Carlson,Matthew</dd>
</dl>