可过滤表与Jquery

我想通过基本文本输入和使用多选字段来过滤下表 .

示例：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>

Question 1

我想改进搜索输入以使用过滤功能而不是区分大小写 . 或者无论什么功能最有意义 .

它可以搜索整行，不必只是 Headers .

我目前正在过滤它：包含并且不能很好地工作，因为它区分大小写，似乎应该有更好的路径 .

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()
    }
})

Question 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
})