Question

正如您在我的代码段中看到的那样，我只能搜索名字，例如全名“ABDOL JABAR BAKARI”，第一个名称是“abdol”，在过滤函数中只使用名称“abdol”，它必须将名为“data-fullname”的数据属性中的所有字符串都过滤掉。任何想法，线索，帮助，建议，建议，使其搜索名为“data-fullname”的数据属性中的整个字符串，并从名为“data-job”的数据属性中的字符串中搜索？

$(document).ready(function(){

  $('.search_employee').on('input', function() {
        var value = this.value.toLowerCase();
        
        $('.profile').hide().filter(function() {
            var name = $(this).attr('data-fullname').toLowerCase();
            return value.trim().length < 1 || name.indexOf(value) === 0;
        }).show();
    });
});

.profile{
  width: 200px;
  float: left;
  display: block;
  margin: 5px;
  border: 1px solid #ccc;
  padding: 10px 0px;
 }
.profile h1{
  font-size: 15px;
  color: 555;
  padding: 5px;
  margin: 0px;
  text-align: center;
  text-transform: uppercase;
 }
.profile p{
  font-size: 13px;
  color: 555;
  padding: 5px;
  margin: 0px;
  text-align: center;
  text-transform: uppercase;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" class="form-control search_employee" placeholder="Search here...">

<div id="profile_holder">
  <div class="profile" data-fullname="Abdol Jabar Bakari" data-job="system developer">
    <h1>Abdol Jabar Bakari</h1>
    <p>System Developer</p>
  </div>
  <div class="profile" data-fullname="Jason Fang" data-job="database analysis">
    <h1>Jason Fang</h1>
    <p>Database Analysis</p>
  </div>
  <div class="profile" data-fullname="Mechelle Newyurk" data-job="sales officer">
    <h1>Mechelle Newyurk</h1>
    <p>Sales Officer</p>
  </div>
  <div class="profile" data-fullname="Juliver Galleto" data-job="ui/ux">
    <h1>Juliver Galleto</h1>
    <p>UI/UX</p>
  </div>
</div>

Answer 1

需要进行简单的更改。您应该检查name.indexOf(value) !== -0;

，而不是检查name.indexOf(value) !== -1;

＆＃13;

$(document).ready(function(){

  $('.search_employee').on('input', function() {
        var value = this.value.toLowerCase();
        
        $('.profile').hide().filter(function() {
            var name = $(this).attr('data-fullname').toLowerCase();
            return value.trim().length < 1 || name.indexOf(value) !== -1;
        }).show();
    });
});

＆＃13;

.profile{
  width: 200px;
  float: left;
  display: block;
  margin: 5px;
  border: 1px solid #ccc;
  padding: 10px 0px;
 }
.profile h1{
  font-size: 15px;
  color: 555;
  padding: 5px;
  margin: 0px;
  text-align: center;
  text-transform: uppercase;
 }
.profile p{
  font-size: 13px;
  color: 555;
  padding: 5px;
  margin: 0px;
  text-align: center;
  text-transform: uppercase;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" class="form-control search_employee" placeholder="Search here...">

<div id="profile_holder">
  <div class="profile" data-fullname="Abdol Jabar Bakari" data-job="system developer">
    <h1>Abdol Jabar Bakari</h1>
    <p>System Developer</p>
  </div>
  <div class="profile" data-fullname="Jason Fang" data-job="database analysis">
    <h1>Jason Fang</h1>
    <p>Database Analysis</p>
  </div>
  <div class="profile" data-fullname="Mechelle Newyurk" data-job="sales officer">
    <h1>Mechelle Newyurk</h1>
    <p>Sales Officer</p>
  </div>
  <div class="profile" data-fullname="Juliver Galleto" data-job="ui/ux">
    <h1>Juliver Galleto</h1>
    <p>UI/UX</p>
  </div>
</div>

＆＃13;

Answer 2

问题是条件name.indexOf(value) === 0将搜索词与字符串的开头匹配。

如果未找到搜索到的字词indexOf将会后续-1，那么只需检查返回的值是否为＆gt; 1检查字符串中是否存在该术语，如name.indexOf(value) > -1;

＆＃13;

$(document).ready(function() {

  $('.search_employee').on('input', function() {
    var value = this.value.toLowerCase().trim();
    if (value) {
      //do this only if a filter condition is present
      $('.profile').hide().filter(function() {
        var name = $(this).data('fullname').toLowerCase();
        return name.indexOf(value) > -1 || $(this).data('job').toLowerCase().indexOf(value) > -1;
      }).show();
    } else {
      $('.profile').show();
    }
  });
});

＆＃13;

.profile {
  width: 200px;
  float: left;
  display: block;
  margin: 5px;
  border: 1px solid #ccc;
  padding: 10px 0px;
}
.profile h1 {
  font-size: 15px;
  color: 555;
  padding: 5px;
  margin: 0px;
  text-align: center;
  text-transform: uppercase;
}
.profile p {
  font-size: 13px;
  color: 555;
  padding: 5px;
  margin: 0px;
  text-align: center;
  text-transform: uppercase;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" class="form-control search_employee" placeholder="Search here...">

<div id="profile_holder">
  <div class="profile" data-fullname="Abdol Jabar Bakari" data-job="system developer">
    <h1>Abdol Jabar Bakari</h1>
    <p>System Developer</p>
  </div>
  <div class="profile" data-fullname="Jason Fang" data-job="database analysis">
    <h1>Jason Fang</h1>
    <p>Database Analysis</p>
  </div>
  <div class="profile" data-fullname="Mechelle Newyurk" data-job="sales officer">
    <h1>Mechelle Newyurk</h1>
    <p>Sales Officer</p>
  </div>
  <div class="profile" data-fullname="Juliver Galleto" data-job="ui/ux">
    <h1>Juliver Galleto</h1>
    <p>UI/UX</p>
  </div>
</div>

＆＃13;

filter string只过滤不带空格的字符串

2 个答案: