搜索数据名​​称属性内容，如果匹配则显示

Question

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

＆＃13;

＆＃13;

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

＆＃13;

.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
}

＆＃13;

<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 -->

＆＃13;

＆＃13;

＆＃13;

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

希望这会对你有所帮助。