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

search through data-name attribute content if match then show

本文关键字：显示 如果 数据 属性 搜索      更新时间：2023-09-26

我想搜索名为"data-name"的属性的内容，该属性嵌入在每个具有"infodata"类的div中，就像你在下面看到我的小提琴一样，有一个3个div，每个div现在都有一个"data-name"属性，如果我要输入输入框（搜索框），例如"J或j"或任何字母或完整的名称，例如"Jason"或全名，例如"Mechelle Hill"， 只要该输入框（搜索输入框）上的任何内容与任何"数据名称"属性内容匹配，然后显示具有"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 -->

  1. 使用 input 事件捕获对搜索的更改
  2. 默认隐藏所有.infodatadiv
  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 -->

试试这个： 

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

https://jsfiddle.net/tnw0nojt/

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

希望这对你有帮助。

相关文章：