javascript - 如何仅在输入 3 个字符时进行过滤/搜索栏搜索?
问题描述
我在这里有一个来自 w3schools 网站的搜索栏,我已经对其进行了调整。
现在,它会在输入的第一个字母处显示所有结果,这会降低我的网站速度,因为一次就有超过 5000 个结果。
我想知道如何仅在输入 3 个(或 4-5 个)字符/字母后进行此搜索?
这是演示
这是到目前为止的脚本:
<script>
document.addEventListener("DOMContentLoaded", function() {
var $input = document.getElementById("myInput"),
$table = document.getElementById("myTable"),
$$tr = $table.querySelectorAll("tbody tr"),
$noResults = $table.querySelector("tfoot tr");
for (var i = 0; i < $$tr.length; i++) {
var $$td = $$tr[i].querySelectorAll("td"),
name = $$td[0].innerText,
country = $$td[1].innerText;
$$tr[i].normalizedValue = normalizeStr( name + " " + country );
}
$input.addEventListener("input", performSearch);
function performSearch() {
var filter = normalizeStr(this.value),
resultCount = 0;
for (var i = 0; i < $$tr.length; i++) {
var isMatch = filter.length > 0 && $$tr[i].normalizedValue.includes(filter);
if (isMatch) { resultCount++; }
$$tr[i].classList[isMatch ? "add" : "remove"]("visible");
}
var showNoResultsMessage = resultCount === 0 && filter.length > 0;
$noResults.classList[showNoResultsMessage ? "add" : "remove"]("visible");
}
function normalizeStr(str) {
return (str || '').toUpperCase().trim();
}
});
</script>
这是CSS:
#myInput{
font-size:15px;
width:90%;
padding: 5px;
border-radius: 4px;
border: none;
margin-bottom: 1px;
background: #f5f5f5;
outline: none;
color: #000000;
}
input::placeholder {
color: #000000;
}
#myTable{
border-collapse:collapse;
width:90%;
font-size:14px;
font-family: "Poppins", sans-serif;
}
#myTable td, #myTable th{
text-align:left;
padding:8px;
}
#myTable td a
}
#myTable tr{
border-bottom:1px solid #222222;
}
#myTable thead tr, /* notice the use of thead */
#myTable tr:hover {
background-color: #e0f2f1;
text-decoration: none;
}
#myTable tbody tr {
display: none; /* Hide rows by default */
}
#myTable tbody tr.visible {
display: table-row; /* Show them when they match */
}
#myTable tfoot tr:not(.visible) {
display: none; /* Hide the "no results" message if not visible */
}
#myTable tfoot td {
text-align: center;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
和 HTML:
<input class="mt-4 mx-auto" type="text" id="myInput" placeholder="Search"/>
<table class="mb-5" id="myTable" align="center"><tbody>
<tr><td><a href="https://quip.com/" target="_blank"><b>BM: </b>Quip</a></td><td><p hidden></p></td></tr>
<tr><td><a href="https://www.facebook.com/" target="_blank"><b>BM: </b>Facebook</a></td><td><p hidden></p></td></tr>
<tr><td><a href="https://www.instagram.com/" target="_blank"><b>BM: </b>Instagram</a></td><td><p hidden></p></td></tr>
<tr><td><a href="https://twitter.com/" target="_blank"><b>BM: </b>Twitter</a></td><td><p hidden></p></td></tr>
<tr><td><a href="https://web.telegram.org/" target="_blank"><b>BM: </b>Telegram</a></td><td><p hidden></p></td></tr>
<tr><td><a href="https://open.spotify.com/" target="_blank"><b>BM: </b>Spotify</a></td><td><p hidden></p></td></tr>
</table>
我真的很感激所有的帮助。干杯! :)
解决方案
HTML:
<input type="text" id="input">
JS:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('input').addEventListener('input', performSearch);
function performSearch() {
if (this.value.length < 3) return;
// search code
}
});
如果您有任何问题,请提出。
推荐阅读
- javascript - 为什么工具提示被渲染两次?
- java - 如何使用 MaterialCardView 制作第二个颜色边框?
- c# - 为什么 BackgroundWorker 的 Progress 事件运行在不同的线程上?
- c# - 无法在 Raspberry Pi 上运行 .NET 5 Windows 窗体 - 找不到框架
- javascript - 为了启动全局执行上下文,在 ecma262 中发生的第一个抽象操作是什么?
- next.js - 更改下一个服务端口时不显示 Favicon
- google-chrome-devtools - 为什么 Fetch API 在我的机器上不起作用?
- amazon-web-services - AWS CloudFormation 无法使用 CodeDeploy 蓝/绿部署创建堆栈
- python - PIL python像形状一样绘制文本列
- javascript - 为什么在使用自定义结构指令时调用事件处理程序时模板引用变量未定义?