只显示完全匹配

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/