我在显示 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>你能帮我写代码吗？我将不胜感激
最佳答案
检查输入长度，当输入长度小于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";
}
}
}
}关于javascript - 搜索结果应出现在 3 个字符之后，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52674751/