Javascript 在重复div中使用Jquery实现搜索

我不熟悉jquery。目前我正在开发一个聊天应用程序。功能和一切工作正常，但我目前的需要是，我必须在用户列表页面中放置一个搜索框，以便客户端可以搜索特定用户并与他/她聊天 请查看我的聊天列表页面的屏幕截图

对于清单，我使用了div而不是ul&li。那么我需要的是如何在div中搜索，我的用户列表代码如下

<div class="chatpage-usersListMainDiv" style="height: 502px;">
<div><input type="text" placeholder="Name" id="search_criteria" onkeyup="myFunction()"></div>
<div class="col-md-7 chat_chatboxDisplayDetails"><div class="chat_userdisplayname">Teenu Thomas</div></div>
<div class="col-md-7 chat_chatboxDisplayDetails"><div class="chat_userdisplayname">Justin Luka</div></div>
<div class="col-md-7 chat_chatboxDisplayDetails"><div class="chat_userdisplayname">David John</div></div>
<div class="col-md-7 chat_chatboxDisplayDetails"><div class="chat_userdisplayname">Agnes Era</div></div>
</div>

---

从这里我无法继续，如何才能显示具有匹配名称的div？请帮助

您可以循环浏览包含名称的元素

var people = document.getElementsByClassName("chat_userdisplayname");
for (var i = 0; i < people.length; i++) {
  var name = people[i].innerHTML;
  if (name.startsWith(input.value)) {
    people[i].style.display = 'block';
  } else {
    people[i].style.display = 'none';
  }
}

蒂努·托马斯
贾斯汀·卢卡
大卫约翰
阿格尼斯时代

Sulu，您是否仍然面临这个问题，或者是否有任何解决方案可以帮助您？现在我正在实施它，到目前为止它正在工作。如果我罢工，我会联系你。谢谢

var people = document.getElementsByClassName("chat_userdisplayname");
for (var i = 0; i < people.length; i++) {
  var name = people[i].innerHTML;
  if (name.startsWith(input.value)) {
    people[i].style.display = 'block';
  } else {
    people[i].style.display = 'none';
  }
}