過濾字符串只能過濾不帶空格的字符串

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。

如果沒有找到indexOf搜索任期將retrn -1，所以只檢查返回值是> 1，檢查項是否存在像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>

Answer 2

字符串中需要一個簡單的更改。不是檢查name.indexOf(value) !== -0;的，你應該檢查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>