正確な一致のみを表示

Question

私はJSとJQueryを学んでいましたが、最近私はコンテンツをフィルタリングして遊んでいました。今ではテーブルから行を表示したり非表示にするためにいくつかのフィルタを使用しようとしています。JSFiddleをチェックしてください。私の問題は、私は名前Search FNとオプションのいずれかでフィルタリングする<select>要素が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); 

=）です。

EDIT：これは、終了コードがどのように見えるかです：あなたのフィルタ機能の本体内solution

Answer 1

あなたは結果が削除されるかどうかを判断するためのindexOf（）を使用しています。文字列 "Mark"が "Marky"内にあるため、その場合に行が削除されないことを意味する負でないインデックスが返されます。代わりに、そのように文字列リテラル値を比較してみてください：

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/