CODEWITHSUNDEEP
javascriptjquery
Juliver Galleto
Juliver Galleto

Reputation: 9037

filter string only filter the string without spaces

as you can see on my snippets, I could search only for the first name e.g. full name"ABDOL JABAR BAKARI" and the first name is "abdol" and only the name "abdol" is utilize in the filter function which it must all the string inside that data attribute named "data-fullname" will filtered. any ideas, clues, help, suggestions, recommendation to make it search the whole string inside the data attribute named "data-fullname" and search also from the string inside the data attribute named "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>

Upvotes: 0

Views: 85

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388326

The problem is the condition name.indexOf(value) === 0 which matches the search term to only the start of the string.

If the searched term is not found indexOf will retrn -1, so just check the returned value is > 1 to check whether the term is present in the string like name.indexOf(value) > -1;

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

Upvotes: 0

Manish Kr. Shukla
Manish Kr. Shukla

Reputation: 4477

A simple change required. Instead of checking for name.indexOf(value) !== -0;, you should check for name.indexOf(value) !== -1;

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

Upvotes: 1

Related Questions