如何在js和html中进行快速搜索？

Answer 1

一种解决方案是避免改变每个元素的可见性，而是每次从头开始构建整个“表”的 HTML。因此初始加载和输入处理程序将依赖于相同的 HTML 构建函数。

初始加载仅包括将数据加载到全局数组中，并使用该数组作为重建 HTML 的基础。

这是一个包含 2000 个条目的演示：

const data = [];

function display(searchValue) {
    const table = document.createElement("div");
    table.classList.add("parent-container")
    data.forEach((emoteName, count) => {
        if (searchValue === undefined || emoteName.includes(searchValue)) {
            var div = document.createElement("div");
            div.classList.add("child", "childno", count);
            table.appendChild(div);
            div.innerHTML=
                '<div id="'+count+'" class="emote_container">'+
                    '<span class="emote_name_lbl"> '+count+' </span>' +
                '</div>';
        }
    });
    document.getElementById("emotes_area").innerHTML="";
    document.getElementById("emotes_area").appendChild(table);
}

document.addEventListener("DOMContentLoaded", function () {
    // Load your real data here, into data array
    for (var count = 0; count < 2000; count++) {
        data.push(String(count));
    }
    // Create the HTML based on the array
    display();
});

document.getElementById("input_search").addEventListener("input", function() {
    // Recreate the HTML based on the data array and the input filter
    display(this.value.toLowerCase());
});

.emotes_area{
  position: absolute;
  width: 404px;
  height: 703px;
  top: 65px;
  left: 62px;
  flex-wrap: wrap;
  overflow-y: auto;
  overflow-x: hidden;
}

.emotes_area::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.25);
  background-color: rgba(255, 255, 255, 0.25);
}

.emotes_area::-webkit-scrollbar
{
  width: 1px;
  background-color: #00000000;
}

.emotes_area::-webkit-scrollbar-thumb
{
  -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.25);
  background-color: rgb(255, 255, 255);
}

.emote_container{
  position: relative;
  width: 123px;
  height: 131px;
  flex-shrink: 0;
  background: radial-gradient(82.29% 82.29% at 50% 50%, rgba(143, 143, 143, 0.5) 10%, rgba(255, 255, 255, 0.00) 90%);
  box-shadow: inset 0 0 0 1px  #81818173;
  display: flex;
  top: 0px;
  cursor: pointer;
  margin: 2.7px;
}

/* New CSS */
.parent-container {
    display: flex;
    flex-wrap: wrap;
}
.child {
    max-width: 33.33%;
}

<div class="emotes_area"  id="emotes_area"></div>
<input class="search_input" id="input_search" type="text" placeholder="Search Something...">