У меня проблема с отображением результата поиска после 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>
Вы можете помочь мне с кодом?Я был бы более чем благодарен