javascript - filter string only filter the string without spaces -


as can see on snippets, search first name e.g. full name"abdol jabar bakari" , first name "abdol" , name "abdol" utilize in filter function must string inside data attribute named "data-fullname" filtered. ideas, clues, help, suggestions, recommendation make search whole string inside data attribute named "data-fullname" , search string inside 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>

the problem condition name.indexof(value) === 0 matches search term start of string.

if searched term not found indexof retrn -1, check returned value > 1 check whether term present in string name.indexof(value) > -1;

$(document).ready(function() {      $('.search_employee').on('input', function() {      var value = this.value.tolowercase().trim();      if (value) {        //do if filter condition 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>


Comments