搜索 data-name 属性内容，如果匹配则显示

Question

我想搜索名为“data-name”的属性的内容，该属性嵌入在每个具有“infodata”类的 div 中，就像你在下面看到的我的小提琴一样，有 3 个 div，每个都有一个“如果我要进入输入框（搜索框），则现在数据名称“属性，例如“J 或 j”或任何字母或全名，例如“Jason”或全名，例如“Mechelle Hill”，只要该输入框（搜索输入框）上的任何内容与任何“data-name”属性内容匹配，则显示具有“infodata”类的匹配 div，否则将其隐藏。任何建议、建议、想法、线索、帮助，将不胜感激。谢谢！

$(document).ready(function(){
  
  //empty yet, dont know how to do it :(
  
});

.extend{max-width: 100%; max-height: 100%;}
.clear{clear: both; float: none;}
.bgwhite{background: #ffffff;}
.center{margin-left: auto; margin-right: auto;}
.display_block{display: block;}
.align_left{float: left;}
.align_right{float: right;}

#searchbox_container input[type="text"]{
 bacground: #ffffff;
 border: 1px solid #cccccc;
 padding: 8px;
 color: #555555;
}
#searchbox_container input[type="text"]:focus{
 outline: none; 
}
.infodata{
 margin: 5px; 
}
.infodata h1{
  font-size: 15px;
  padding: 0px;
  margin: 0px 0px 3px 0px;
  text-align: center;
  text-transform: uppercase;
}
.infodata p{
  font-size: 10px;
  padding: 0px;
  margin: 0px;
  text-align: center;
  text-transform: uppercase;
}
.infodata img{
  width: 125px;
  height: 125px;
  margin-bottom: 5px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="extend clear bgwhite extend center" id="mainwrapper">
  <div class="extend clear" id="searchbox_container">
    <input type="text" name="searchnow" placeholder="Search here..." value="" class="extend clear display_block align_right" /> 
  </div> <!-- end of searchbox_container -->
  <div class="extend clear" id="info_data_container">
    <div class="infodata extend display_block align_left" data-name="Jason Acapela">
      <img src="img/user1.jpg" class="extend clear display_block center" alt="" width="125" height="125" title="Jason Acapela">
      <h1>Jason Acapela</h1>
      <p>Web Developer</p>
    </div> <!-- end of .infodata -->
    <div class="infodata extend display_block align_left" data-name="Derrick Tour">
      <img src="img/user1.jpg" class="extend clear display_block center" alt="" width="125" height="125" title="Derrick Tour">
      <h1>Derrick Tour</h1>
      <p>UI/UX</p>
    </div> <!-- end of .infodata -->
    <div class="infodata extend display_block align_left" data-name="Mechelle Hill">
      <img src="img/user1.jpg" class="extend clear display_block center" alt="" width="125" height="125" title="Mechelle Hill">
      <h1>Mechelle Hill</h1>
      <p>System Developer</p>
    </div> <!-- end of .infodata -->
  </div> <!-- end of #info_data_container -->
</div> <!-- end of #mainwrapper -->

Answer 1

1. 使用input 事件捕获对搜索的更改
2. 默认隐藏所有.infodata div
3. 如果搜索值与属性匹配，则显示。您可以通过indexOf()查看
4. 确保使用toUpperCase 或toLowerCase 使搜索不区分大小写

$(document).ready(function(){
  $('[name="searchnow"]').on('input', function(){
    var that = $(this);
    $('.infodata').hide();
  $('.infodata').each(function(){
    if($(this).attr('data-name').toUpperCase().indexOf(that.val().trim().toUpperCase()) > -1){
      $(this).show();
      }
    });
  });
});

.extend{max-width: 100%; max-height: 100%;}
.clear{clear: both; float: none;}
.bgwhite{background: #ffffff;}
.center{margin-left: auto; margin-right: auto;}
.display_block{display: block;}
.align_left{float: left;}
.align_right{float: right;}

#searchbox_container input[type="text"]{
 bacground: #ffffff;
 border: 1px solid #cccccc;
 padding: 8px;
 color: #555555;
}
#searchbox_container input[type="text"]:focus{
 outline: none; 
}
.infodata{
 margin: 5px; 
}
.infodata h1{
  font-size: 15px;
  padding: 0px;
  margin: 0px 0px 3px 0px;
  text-align: center;
  text-transform: uppercase;
}
.infodata p{
  font-size: 10px;
  padding: 0px;
  margin: 0px;
  text-align: center;
  text-transform: uppercase;
}
.infodata img{
  width: 125px;
  height: 125px;
  margin-bottom: 5px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="extend clear bgwhite extend center" id="mainwrapper">
  <div class="extend clear" id="searchbox_container">
    <input type="text" name="searchnow" placeholder="Search here..." value="" class="extend clear display_block align_right" /> 
  </div> <!-- end of searchbox_container -->
  <div class="extend clear" id="info_data_container">
    <div class="infodata extend display_block align_left" data-name="Jason Acapela">
      <img src="img/user1.jpg" class="extend clear display_block center" alt="" width="125" height="125" title="Jason Acapela">
      <h1>Jason Acapela</h1>
      <p>Web Developer</p>
    </div> <!-- end of .infodata -->
    <div class="infodata extend display_block align_left" data-name="Derrick Tour">
      <img src="img/user1.jpg" class="extend clear display_block center" alt="" width="125" height="125" title="Derrick Tour">
      <h1>Derrick Tour</h1>
      <p>UI/UX</p>
    </div> <!-- end of .infodata -->
    <div class="infodata extend display_block align_left" data-name="Mechelle Hill">
      <img src="img/user1.jpg" class="extend clear display_block center" alt="" width="125" height="125" title="Mechelle Hill">
      <h1>Mechelle Hill</h1>
      <p>System Developer</p>
    </div> <!-- end of .infodata -->
  </div> <!-- end of #info_data_container -->
</div> <!-- end of #mainwrapper -->

Answer 2

试试这个：

$("#searchnow").change(function(){
   $(".infodata").hide();
   $('.infodata[data-name="'+$(this).val()+'"]').show();
   console.log(string);
});

https://jsfiddle.net/tnw0nojt/

Answer 3

$(document).ready(function(){
  //empty yet, dont worry now there will be code :)
  $("#searchbox_container input[type='text']").keyup(function(){
      var v1 = $(this).val();
      $('.infodata').hide().each(function(){
          var v2 = $(this).data('name');
          var v3 = v2.substr(0,v1.length);
          if(v1.toUpperCase() == v3.toUpperCase()){
              $(this).show();
          }
      });
  });
});

希望对你有所帮助。