只顯示完全匹配

Question

我一直在學習JS和JQuery，最近我一直在玩過濾內容，現在我試圖用幾個過濾器來顯示和隱藏表中的行，請檢查JSFiddle。我的問題是，我使用<select>元素來篩選名稱Search FN，其中一個選項是Mark但如果我選擇Mark還向我顯示名爲Marky的行，所以如何只顯示Mark行？完全匹配。

HTML 
<div class="row"> 
    <span class="col-xs-3"> 
     <span class="input-group"> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 
      </span> 
      <input class="form-control" id="searchbox" type="text" name="searchbox" placeholder="Search" /> 
     </span> 
    </span> 
    <span class="col-xs-3"> 
     <select class="form-control" id="listfirst" name="listfirst"> 
      <option value="" selected="selected">Search FN</option> 
      <option value="1">Mark</option> 
      <option value="2">Jacob</option> 
      <option value="3">Larry</option> 
     </select> 
    </span> 
    <span class="col-xs-3"> 
     <select class="form-control" id="listlast" name="listlast"> 
      <option value="" selected="selected">Search LN</option> 
      <option value="1">Otto</option> 
      <option value="2">Thornton</option> 
      <option value="3">the Bird</option> 
     </select> 
    </span> 
    <span class="col-xs-3"> 
     <select class="form-control" id="listuser" name="listuser"> 
      <option value="" selected="selected">Search UN</option> 
      <option value="1">@mdo</option> 
      <option value="2">@fat</option> 
      <option value="3">@twitter</option> 
     </select> 
    </span> 
</div> 
<table class="table table-hover"> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Username</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <th scope="row">1</th> 
      <td class="fn">Mark</td> 
      <td class="ln">Otto</td> 
      <td class="un">@mdo</td> 
     </tr> 
     <tr> 
      <th scope="row">2</th> 
      <td class="fn">Jacob</td> 
      <td class="ln">Thornton</td> 
      <td class="un">@fat</td> 
     </tr> 
     <tr> 
      <th scope="row">3</th> 
      <td class="fn">Larry</td> 
      <td class="ln">the Bird</td> 
      <td class="un">@twitter</td> 
     </tr> 
     <tr> 
      <th scope="row">4</th> 
      <td class="fn">Marky</td> 
      <td class="ln">Thornton</td> 
      <td class="un">@twitter</td> 
     </tr> 
    </tbody> 
</table> 

而這裏的任何幫助表示讚賞腳本

JS 
function filter() { 
     var box = $('#searchbox').val().toLowerCase(); 
     var listf = $('#listfirst :selected').text().toLowerCase(); 
     var listl = $('#listlast :selected').text().toLowerCase(); 
     var listu = $('#listuser :selected').text().toLowerCase(); 
     if (listf == 'search fn') { 
      listf = ''; 
     } 
     if (listl == 'search ln') { 
      listl = ''; 
     } 
     if (listu == 'search un') { 
      listu = ''; 
     } 
     if (box != '' || listf != '' || listl != '' || listu != '') { 
      $('table > tbody > tr').hide().filter(function() { 
       var show = true; 
       var texttr = $(this).text().toLowerCase(); 
       var textfn = $(this).find('td.fn').text().toLowerCase(); 
       var textln = $(this).find('td.ln').text().toLowerCase(); 
       var textun = $(this).find('td.un').text().toLowerCase(); 
       if (box != '' && texttr.indexOf(box) == -1) { 
        show = false; 
       } else if (listf != '' && textfn.indexOf(listf) == -1) { 
        show = false; 
       } else if (listl != '' && textln.indexOf(listl) == -1) { 
        show = false; 
       } else if (listu != '' && textun.indexOf(listu) == -1) { 
        show = false; 
       } 
       return show; 
      }).show(); 
     } else { 
      if (box == '') { 
       $('table > tbody > tr').show(); 
      } else if (listf == '') { 
       $('table > tbody > tr').show(); 
      } else if (listl == '') { 
       $('table > tbody > tr').show(); 
      } else if (listu == '') { 
       $('table > tbody > tr').show(); 
      } 
     } 
    }; 
    $('#searchbox').keyup(filter); 
    $('#listfirst').change(filter); 
    $('#listlast').change(filter); 
    $('#listuser').change(filter); 

=）對不起，我的英語不好。

編輯：這是怎麼看起來結束代碼：solution

Answer 1

在你的過濾器功能的身體，你正在使用的indexOf（），以確定結果是否會被刪除。由於字符串「Mark」在「Marky」內，因此將返回一個非負數索引，意味着在這種情況下行不會被刪除。相反，嘗試文本字符串值進行比較，如下所示：

if (box != '' && texttr != box) { 
      show = false; 

這意味着整體功能將是這樣的：

function filter() { 
    var box = $('#searchbox').val().toLowerCase(); 
    var listf = $('#listfirst :selected').text().toLowerCase(); 
    var listl = $('#listlast :selected').text().toLowerCase(); 
    var listu = $('#listuser :selected').text().toLowerCase(); 
    if (listf == 'search fn') { 
     listf = ''; 
    } 
    if (listl == 'search ln') { 
     listl = ''; 
    } 
    if (listu == 'search un') { 
     listu = ''; 
    } 
    if (box != '' || listf != '' || listl != '' || listu != '') { 
     $('table > tbody > tr').hide().filter(function() { 
      var show = true; 
      var texttr = $(this).text().toLowerCase(); 
      var textfn = $(this).find('td.fn').text().toLowerCase(); 
      var textln = $(this).find('td.ln').text().toLowerCase(); 
      var textun = $(this).find('td.un').text().toLowerCase(); 
      if (box != '' && texttr != box) { 
       show = false; 
      } else if (listf != '' && textfn != listf) { 
       show = false; 
      } else if (listl != '' && textln != listl) { 
       show = false; 
      } else if (listu != '' && textun != listu) { 
       show = false; 
      } 
      return show; 
     }).show(); 
    } else { 
     if (box == '') { 
      $('table > tbody > tr').show(); 
     } else if (listf == '') { 
      $('table > tbody > tr').show(); 
     } else if (listl == '') { 
      $('table > tbody > tr').show(); 
     } else if (listu == '') { 
      $('table > tbody > tr').show(); 
     } 
    } 
}; 
$('#searchbox').keyup(filter); 
$('#listfirst').change(filter); 
$('#listlast').change(filter); 
$('#listuser').change(filter); 

工作例如：https://jsfiddle.net/Jason_Graham/oau6og5u/