Что касается выбора, вы должны убедиться, что вы показываете все, когда выбрано all
, а также вы можете упростить show()
с помощью специального селектора c:
Что касается поиска по текста, я бы поискал в каждой ячейке с заголовком (вы использовали класс a2
).
Кроме того, я бы создал элемент, который обертывает каждый элемент. Теперь у вас есть несколько <tr>
верхнего уровня, принадлежащих одному и тому же элементу. Я бы сделал один <tr>
для каждого элемента, а затем несколько <td>
для каждого поля (эскиз, заголовок, дата и т. Д. c.) Я просто использовал <tr>
, но вы можете использовать <tbody>
, если хотите .
$(document).ready(function() {
(function($) {
$(".filter").change(function() {
var filterValue = $(this).val();
var $rows = $('.row');
if (filterValue === 'all') {
$rows.show();
} else {
$rows.hide();
$(".row[data-type='" + filterValue + "']").show();
}
});
$('#filter1').keyup(function() {
var filterText = $(this).val().trim();
var $rows = $('.row');
// make sure that the filter of the select box is applied
$(".filter").change();
if (filterText === '') {
// do nothing
} else {
var rex = new RegExp(filterText, 'i');
$('.searchable .a2').filter( function () { return !rex.test($(this).text().trim()); } )
.closest('.row')
.hide();
}
});
}(jQuery));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="filter1" type="search" placeholder="Search "></form>
<Br>
<label for="filter">Show videos of specific Category:</label>
<select class="filter" data-tableId="table1">
<option value="all">All</option>
<option value="music">Music </option>
<option value="art">art</option>
<option value="dance">dance</option>
</select>
<table id="table1" class="searchable">
<tbody class="row" data-type="music">
<tr>
<td rowspan="4" class="a"><img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
<td class="a2"><a href="{{LINK to Yotube video}}">Music 1</a></td>
</tr>
<tr>
<td class="b"><span class="child"> Date : 15-Apr-20 </span></td>
</tr>
<tr>
<td class="b"><span class="child">Length : </span></td>
</tr>
<tr>
<td class="b"><span class="child">Category : Music </span></td>
</tr>
</tbody>
<tbody class="row" data-type="art">
<tr>
<td rowspan="4" class="a"><img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
<td class="a2"><a href="{{LINK to Yotube video}}">art 1</a></td>
</tr>
<tr>
<td class="b"><span class="child"> Date : 15-Apr-20 </span></td>
</tr>
<tr>
<td class="b"><span class="child">Length : </span></td>
</tr>
<tr>
<td class="b"><span class="child">Category : art </span></td>
</tr>
</tbody>
<tbody class="row" data-type="art">
<tr>
<td rowspan="4" class="a"><img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
<td class="a2"><a href="{{LINK to Yotube video}}">art 2</a></td>
</tr>
<tr>
<td class="b"><span class="child"> Date : 15-Apr-20 </span></td>
</tr>
<tr>
<td class="b"><span class="child">Length : </span></td>
</tr>
<tr>
<td class="b"><span class="child">Category : art </span></td>
</tr>
</tbody>
<tbody class="row" data-type="dance">
<tr>
<td rowspan="4" class="a"><img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
<td class="a2"><a href="{{LINK to Yotube video}}">dance 1</a></td>
</tr>
<tr>
<td class="b"><span class="child"> Date : 15-Apr-20 </span></td>
</tr>
<tr>
<td class="b"><span class="child">Length : </span></td>
</tr>
<tr>
<td class="b"><span class="child">Category : dance </span></td>
</tr>
</tbody>
<tbody class="row" data-type="dance">
<tr>
<td rowspan="4" class="a"><img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
<td class="a2"><a href="{{LINK to Yotube video}}">dance 2</a></td>
</tr>
<tr>
<td class="b"><span class="child"> Date : 15-Apr-20 </span></td>
</tr>
<tr>
<td class="b"><span class="child">Length : </span></td>
</tr>
<tr>
<td class="b"><span class="child">Category : dance </span></td>
</tr>
</tbody>
</table>