僅顯示完全匹配

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);

任何幫助表示贊賞=）對不起，我的英語不好。

編輯：這是看起來如何結束代碼： 解決方案

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/