Question

我在显示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>

您能帮我提供代码吗？我将不胜感激

Answer 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";
      }
    }
  }
}

Answer 2

在这里我将建议两件事：一是请使用oninput事件捕获值更改（https://www.w3schools.com/jsref/event_oninput.asp），第二是请等待值长度为三，如上面的答案所示。

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

搜索结果应在3个字符后显示

2 个答案: