搜索结果应该出现在 3 个字符之后答案

【问题标题】：search result should appear after 3 characters搜索结果应该出现在 3 个字符之后
【发布时间】：2018-10-06 00:39:12
【问题描述】：

我在 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>asd@ast.com</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>asd@ast.com</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>asd@ast.com</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>asd@ast.com</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>asd@ast.com</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

【解决方案1】：

检查输入的长度，当输入长度小于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";
      }
    }
  }
}

【讨论】：

感谢您的努力，我尝试了上面的代码，但仍然得到相同的结果，在我输入第一个字符后它开始显示结果
非常感谢@sridhar.. 现在它工作得很好:)

【解决方案2】：

我会在这里建议两件事，一是请使用 oninput 事件来捕获值变化（https://www.w3schools.com/jsref/event_oninput.asp），二是请等到值长度为 3，如上述答案中所建议的那样。

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

【讨论】：