搜索结果应在3个字符后显示
[英]search result should appear after 3 characters
问题描述
我在显示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>
您可以通过代码帮助我吗？ 我将不胜感激
2 个解决方案
解决方案1
1 已采纳 2018-10-06 00:50:47
检查输入的长度，并且当输入长度小于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"; } } } }
解决方案2
1 2018-10-06 01:02:53
我将在这里建议两件事，一是请使用oninput事件捕获值变化（ https://www.w3schools.com/jsref/event_oninput.asp ），其次请等到值长度为三，如上述答案所示。
`https://jsfiddle.net/poojanbedi/d5q3op0j/`
Javascript 如何在输入 3 个字符后显示自动建议结果
[英]Javascript how to make auto suggest results appear after entering 3 characters
如果在搜索过程中没有结果，则讲述人应阅读“无搜索结果”
[英]Narrator should read “no search results” if there is no result while searching
搜索完成后从搜索结果中删除/隐藏标记 -Leaflet
[英]Remove /Hide Marker from search result after search is finished -Leaflet
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.