Я работаю с обычным фильтром Jquery, но он не показывает общее количество результатов или результатов. Я пробовал, но он показывает неверный результат. Другой факт, что когда я очищаю поле ввода, он также должен очищать число. Скорее это показывает более ложное число. Пожалуйста, посмотрите на мой код.
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<input id = "myInput" type = "text" placeholder = "Search.." tada-table = "a">
<br><br>
<p id = "search-result-num"></p>
<table class = "a">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id = "myTable">
<tr>
<td>Aram</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
<script type = "text/javascript">
$("input").on("keyup", function() {
var valThis = this.value;
$("table").find("tr td").each(function() {
if ($(this).attr("data-search") !== "false") {
var text = $(this).text();
var textL = text.toLowerCase();
var position = textL.indexOf(valThis.toLowerCase());
var regex = new RegExp(valThis, "ig");
text = text.replace(regex, (match, $1) => {
// Return the replacement
return "<mark>" + match + "</mark>";
});
/*This is what I'm trying to show */
var num = text.length;
$("#search-result-num").html(num);
$(this).html(text);
if (position !== -1) {
setTimeout(function() {
if ($(this).parent().find("mark").is(":empty")) {
$("mark").remove();
}
}.bind(this), 0);
} else {
$(this).text(text);
}
}
if ($(this).parent().find("mark").length > 0) {
$(this).parent().show();
} else {
$(this).parent().hide();
}
});
});
</script>
Почему он не показывает точный или правильный номер результата? И когда я очищаю поле ввода, число должно очиститься. Скорее это показывает более неправильный номер.
@CarstenLøvboAndersen Нет. Когда кто-то ищет, он показывает результат с подсветкой. Но я просто хочу показать номер выделения совпадения... Сколько чисел совпало с фильтром.
Вы можете добавить это в конец вашей функции keyup:
$("#search-result-num").text($('table tbody tr:visible').length);
Это подсчитает видимые строки в теле вашей таблицы.
Надеюсь, это то, что вы ищете.
Демо
$("input").on("keyup", function() {
var valThis = this.value;
$('table').find('tr td').each(function() {
if ($(this).attr('data-search') !== 'false') {
var text = $(this).text();
var textL = text.toLowerCase();
var position = textL.indexOf(valThis.toLowerCase());
var regex = new RegExp(valThis, 'ig');
text = text.replace(regex, (match, $1) => {
// Return the replacement
return '<mark>' + match + '</mark>';
});
$(this).html(text);
if (position !== -1) {
setTimeout(function() {
if ($(this).parent().find('mark').is(':empty')) {
$('mark').remove();
}
}.bind(this), 0);
} else {
$(this).text(text);
}
}
if ($(this).parent().find('mark').length > 0) {
$(this).parent().show();
} else {
$(this).parent().hide();
}
});
$("#search-result-num").text((valThis.length > 0 ? $('table tbody tr:visible mark').length : ""));
});
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<input id = "myInput" type = "text" placeholder = "Search.." tada-table = "a">
<br><br>
<p id = "search-result-num"></p>
<table class = "a">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id = "myTable">
<tr>
<td>Aram</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
Да, это работает. Но когда я очищаю поле ввода, номер всегда остается. Это должно быть незаметно.
Ответьте, пожалуйста, брат
@Md.Ibrahim Пожалуйста, расслабьтесь и помните, что мы ответим, когда у нас будет время. Я обновил демо, попробуйте сейчас
есть проблема. Это просто подсчет количества строк, но не подсчет общего числа находок. Например, когда я ввожу A, он просто показывает номер результата «4». Но там больше 4 числа. Я думаю, что это просто подсчет номера строки результата. Не совпало общее количество.
Теперь это совершенно идеально.
Вы хотите, чтобы он показывал видимые строки или?