如何用Jquery過濾表？

Question

我想通過基本文本輸入並使用多選字段來過濾下表。

示例： http ： //jsfiddle.net/bghouse/6by1f9cx/

<form class="job-search-form">
    <input class="search-keyword" type="text" placeholder="Enter job title or keyword">
</form>

<label for="search-category search-select">
    <select name="select-category" class="select-category" multiple style="width: 100%;" id="search-category">
        <option value="Engineering - Software">Engineering - Software</option>
        <option value="Engineering - Hardware">Engineering - Hardware</option>
        <option value="Sales">Sales</option>
        <option value="Other">Other</option>
        <option value="Tech Support">Tech Support</option>
    </select>
    <a href="#" class="arrow"></a>
</label>

<table class="job-posts-table" role="grid">
    <thead>
        <tr role="row" class="tablesorter-headerRow">
            <th class="col1 tablesorter-header">
                <div class="tablesorter-header-inner">Job Title</div>
            </th>
            <th class="col2 tablesorter-header">
                <div class="tablesorter-header-inner">Category</div>
            </th>
            <th class="col3 tablesorter-header">
                <div class="tablesorter-header-inner">Location</div>
            </th>
        </tr>
    </thead>
    <tbody class="job-posts-body" aria-live="polite" aria-relevant="all">
        <tr role="row">
            <td class="col1">
                <a href="#">
                    <h2 class="job-title">Engineer-Customer Support</h2>
                </a>
            </td>
            <td class="col2"><a href="#"><span class="job-category">Engineering - Software</span></a></td>
            <td class="col3"><a href="#"><span class="job-location">New York, New York</span></a></td>
        </tr>
        <tr role="row">
            <td class="col1">
                <a href="#">
                    <h2 class="job-title">Engineer title 2</h2>
                </a>
            </td>
            <td class="col2"><a href="#"><span class="job-category">Engineering - Hardware</span></a></td>
            <td class="col3"><a href="#"><span class="job-location">Los Angeles, California</span></a></td>
        </tr>
        <tr role="row">
            <td class="col1">
                <a href="#">
                    <h2 class="job-title">Sales Manager</h2>
                </a>
            </td>
            <td class="col2"><a href="#"><span class="job-category">Sales</span></a></td>
            <td class="col3"><a href="#"><span class="job-location">Los Angeles, California</span></a></td>
        </tr>
        <tr role="row">
            <td class="col1">
                <a href="#">
                    <h2 class="job-title">Janitor</h2>
                </a>
            </td>
            <td class="col2"><a href="#"><span class="job-category">Other</span></a></td>
            <td class="col3"><a href="#"><span class="job-location">Orlando, Flordia</span></a></td>
        </tr>
        <tr role="row">
            <td class="col1">
                <a href="#">
                    <h2 class="job-title">Tech Support Level 1</h2>
                </a>
            </td>
            <td class="col2"><a href="#"><span class="job-category">Tech Support</span></a></td>
            <td class="col3"><a href="#"><span class="job-location">Cincinnati, Ohio</span></a></td>
        </tr>
        <tr role="row">
            <td class="col1">
                <a href="#">
                    <h2 class="job-title">Tech Support Level 2</h2>
                </a>
            </td>
            <td class="col2"><a href="#"><span class="job-category">Tech Support</span></a></td>
            <td class="col3"><a href="#"><span class="job-location">Cincinnati, Ohio</span></a></td>
        </tr>
    </tbody>
</table>

問題1

我想改善搜索輸入以使用過濾器功能，而不要區分大小寫。 或最有意義的功能。

它可以搜索整行，而不必只是標題。

我目前正在使用：contains對其進行過濾，並且效果不佳，因為它區分大小寫，而且似乎應該有更好的選擇。

var input_val = '';
$('.search-keyword').on('keyup',function(){
    input_val = $(this).val();
    if(input_val.length >= 3){
        $('.job-posts-body tr').hide()
        $('.job-posts-body tr:contains("'+input_val+'")').show();
    }else{
        $('.job-posts-body tr').show()
    }
})

問題2

使用過濾器功能或其他有意義的功能基於類別過濾表。

我使用的是select2。它返回一個類別數組。

// select input for category    
$('.select-category').on('change',function(){
    console.log( $(this).val() );// array of categories
    // filter table with the above array for the category column
})

// select input for location
$('.select-location').on('change',function(){
    console.log( $(this).val() );// array of locations
    // filter table with the above array for the location column
})

Answer 1

克里斯·科耶爾（Chris Coyier）的文章中包含對問題1的答案（無雙關語）： https: //css-tricks.com/snippets/jquery/make-jquery-contains-case-insensitive/ CAVEAT：請務必閱讀評論關於重寫jQuery的功能，並創建一個新的選擇器（例如：Icontains）。