Как отфильтровать таблицу с помощью 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

Я хочу улучшить ввод для поиска, чтобы использовать функцию фильтра и не учитывать регистр символов.Или какая-либо функция имеет больше смысла.

Она может искать всю строку, а не просто заголовок.

В настоящее время я фильтрую ее: содержит и не работаетздорово, потому что он чувствителен к регистру, и кажется, что должен быть лучший маршрут.

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 содержится (без каламбура) в статье Криса Койера по адресу: https://css -tricks.com / snippets / jquery / make-jquery-содержит-без учета регистра / CAVEAT: Обязательно прочтите комментарии о переопределении функциональности jQuery и создании нового селектора (например, Icontains).