Результат поиска должен появиться после 3 символов

У меня проблема с отображением результата поиска через 3 символа, результат отображается сразу после первого набранного мной символа. Я хочу, чтобы он показывал результат только после ввода хотя бы 3 символов. вот код, который я использовал в HTML, CSS и Javascript

function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

#myInput {
  width: 100%; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
}

<!doctype html>
<html>

<head>
    <meta charset = "utf-8">
    <title>Search</title>
    <link rel = "stylesheet" href = "./assets/css/style.css">
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin = "anonymous">
    <link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>

<body>
    <div class = "container">
        <h1>Search for employees</h1>
        <input class = "container" type = "text" id = "myInput"
        onkeyup = "myFunction()" placeholder = "search...">
        
      <div class = "table-responsive{-sm|-md|-lg|-xl}">
        <table class = "table" id = "myTable">
         <tr class = "header">
            <th>Picture</th>
            <th>Name</th>
            <th>Age</th>
            <th>Active</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Company</th>
            <th>Balance</th>
          </tr>
          <tr>
            <td><img src = "http://placehold.it/32x32" alt = ""></td>
            <td>Smith Junior</td>
            <td>24</td>
            <td>true</td>
            <td>[email protected]</td>
            <td>+8983287687</td>
            <td>Company</td>
            <td>$1000</td>
          </tr>
          <tr>
            <td><img src = "http://placehold.it/32x32" alt = ""></td>
            <td>Linda Lindo</td>
            <td>24</td>
            <td>true</td>
            <td>[email protected]</td>
            <td>+8983287687</td>
            <td>Company</td>
            <td>$1000</td>
          </tr>
          <tr>
            <td><img src = "http://placehold.it/32x32" alt = ""></td>
            <td>Victoria Smith</td>
            <td>24</td>
            <td>true</td>
            <td>[email protected]</td>
            <td>+8983287687</td>
            <td>Company</td>
            <td>$1000</td>
          </tr>
          <tr>
            <td><img src = "http://placehold.it/32x32" alt = ""></td>
            <td>Jason Abraham</td>
            <td>24</td>
            <td>true</td>
            <td>[email protected]</td>
            <td>+8983287687</td>
            <td>Company</td>
            <td>$1000</td>
          </tr>
          <tr>
            <td><img src = "http://placehold.it/32x32" alt = ""></td>
            <td>Ahmed Raquent</td>
            <td>24</td>
            <td>true</td>
            <td>[email protected]</td>
            <td>+8983287687</td>
            <td>Company</td>
            <td>$1000</td>
          </tr>
        </table>
     </div>
    </div>
</body>
<script src = "./assets/js/main.js"></script>



<script src = "//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>

</html>

вы можете помочь мне с кодом? Я был бы более чем благодарен

javascript html css search

06.10.2018 02:39

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Проверьте длину ввода, и если длина ввода меньше 3, ничего не делайте

function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  if (filter.length < 3) {
    return;
  }
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

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

— 06.10.2018 03:01

большое спасибо @sridhar .. теперь работает отлично :)

— 06.10.2018 03:08

06.10.2018 02:50

Я предлагаю две вещи здесь: пожалуйста, используйте событие oninput для регистрации изменения значения (https://www.w3schools.com/jsref/event_oninput.asp), а второе, пожалуйста, подождите, пока длина значения не станет равной трем, как предложено в ответе выше.

`https://jsfiddle.net/poojanbedi/d5q3op0j/`

06.10.2018 03:02

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

Границы столбца и заголовок не выравниваются

Как я могу подключить JavaScript к серверу SQL?

Каково значение этих двух элементов метаданных в <head>

Кнопка отправки HTML 5 не работает должным образом

Использование встроенного блока и встроенного блока, похоже, не работает так, как я ожидал

Проблемы с изменением ширины контейнера на% вместо пикселей

Как перенаправить с помощью jquery страницу на другую, когда счетчик заканчивается?

Одна функция javascript из нескольких кнопок HTML

Session.get ('name') ничего не возвращает, а не данные формы

Как в WordPress заменить гамбургер-меню на стандартное?

Результат поиска должен появиться после 3 символов

Ответы 2

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

Похожие вопросы