如何使用 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

使用过滤功能或任何有意义的方式根据类别过滤表格。

我使用的是多选 2。它返回一个类别数组。

// 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

问题 1 的答案包含在 Chris Coyier 的文章中（不是双关语）： https://css-tricks.com/snippets/jquery/make-jquery-contains-case-insensitive/ 警告：请务必阅读有关覆盖 jQuery 功能和创建新选择器（例如 :Icontains）的 cmets。