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

Question

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

对于列表我使用了div而不是ul＆amp;李。所以我需要的是如何搜索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>

如上显示的html数据。 我的java脚本函数在

之下

function myFunction(){
    var input, filter, ser_div, li, a, i;
    input = document.getElementById('search_criteria');
    filter = input.value.toUpperCase();
     ser_div= document.getElementsByTagName("search_tag");

}

从这里开始，我无法前进，怎么能在名字上显示div？请帮忙

Answer 1

您可以遍历包含名称的元素。

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';
  }
}

这将循环遍历类chat_userdisplayname的所有元素，然后检查名称是否以我们的输入值开头。

function myFunction() {
  var input, filter, ser_div, li, a, i;
  input = document.getElementById('search_criteria');
  filter = input.value.toUpperCase();
  ser_div = document.getElementsByTagName("search_tag");

  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].parentElement.style.display = 'block';
    } else {
      people[i].parentElement.style.display = 'none';
    }
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>