Как показать номер результата фильтра в jQuery?

Я работаю с обычным фильтром 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>

Почему он не показывает точный или правильный номер результата? И когда я очищаю поле ввода, число должно очиститься. Скорее это показывает более неправильный номер.

Вы хотите, чтобы он показывал видимые строки или?

Carsten Løvbo Andersen 09.02.2023 10:44

@CarstenLøvboAndersen Нет. Когда кто-то ищет, он показывает результат с подсветкой. Но я просто хочу показать номер выделения совпадения... Сколько чисел совпало с фильтром.

Md. Ibrahim 09.02.2023 10:48
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
74
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете добавить это в конец вашей функции 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 09.02.2023 10:50

Ответьте, пожалуйста, брат

Md. Ibrahim 09.02.2023 11:14

@Md.Ibrahim Пожалуйста, расслабьтесь и помните, что мы ответим, когда у нас будет время. Я обновил демо, попробуйте сейчас

Carsten Løvbo Andersen 09.02.2023 11:17

есть проблема. Это просто подсчет количества строк, но не подсчет общего числа находок. Например, когда я ввожу A, он просто показывает номер результата «4». Но там больше 4 числа. Я думаю, что это просто подсчет номера строки результата. Не совпало общее количество.

Md. Ibrahim 09.02.2023 11:55

Теперь это совершенно идеально.

Md. Ibrahim 09.02.2023 12:51

Другие вопросы по теме