如何仅在输入 3 个字符时进行过滤/搜索栏搜索？

Question

我在这里有一个来自 w3schools 网站的搜索栏，我已经对其进行了调整。

现在，它会在输入的第一个字母处显示所有结果，这会降低我的网站速度，因为在一个 go 中有超过 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>

我真的很感激所有的帮助。 干杯：:)

Answer 1

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
    }
});

如果您有任何问题，请提出。