搜索数据名​​称属性内容(如果匹配)，然后显示 [英] search through data-name attribute content if match then show

问题描述

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

I want to search through content of the attribute called "data-name" which embedded in each div that has a class of "infodata", like as you can see my fiddle below, there's a 3 divs and each has a "data-name" attribute now if Im going to enter into the input box (the search box) e.g. "J or j" or any letters or a complete name e.g. "Jason" or a full name e.g. "Mechelle Hill", as long as anything on that input box (the search input box) match to any "data-name" attribute content then show the matched div that has a class of "infodata" else hide it. Any suggestions, recommendations, ideas, clues, help, would be greatly appreciated. Thank you!

$(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. 默认隐藏所有.infodata div
3. 如果搜索值与属性匹配，则显示.您可以使用indexOf()
进行检查
4. 确保使用toUpperCase或toLowerCase使搜索不区分大小写

1. Capture changes to the search with the input event
2. Hide all .infodata divs by default
3. If the search value matches the attribute, show. You can check with indexOf()
4. Make sure you use toUpperCase or toLowerCase to make search case insensitive

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

这篇关于搜索数据名​​称属性内容(如果匹配)，然后显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！