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
Post a Comment