search 相关问题

Html： HTML： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="emotes_area" id="emotes_area"> </div> <input class="search_input" id="input_search" type="text" placeholder="Search Something..."> </body> </html> CSS： .emotes_area{ position: absolute; width: 404px; height: 703px; top: 165px; 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%; } js: document.addEventListener("DOMContentLoaded", function () { var count = 0; var countOuter =0; var table=document.createElement("div"); table.classList.add("parent-container") for(var i=0;i<(200);i++){ //SATIR var tr=document.createElement("div"); tr.classList.add("child", "childno") tr.classList.add(countOuter) table.appendChild(tr); tr.innerHTML= '<div id="'+count+'" class="emote_container">'+ '<span id="'+count+'" class="emote_name_lbl"> '+count+' </span>'+ '</div>'; count++; countOuter++; } document.getElementById("emotes_area").innerHTML=""; document.getElementById("emotes_area").appendChild(table); }); document.getElementById("input_search").addEventListener("input", function() { var searchValue = this.value.toLowerCase(); // Get the lowercase value of the input var emoteContainers = document.getElementsByClassName("child"); for (var i = 0; i < emoteContainers.length; i++) { var emoteName = emoteContainers[i].getElementsByClassName("emote_name_lbl")[0].innerText.toLowerCase(); if (emoteName.includes(searchValue)) { emoteContainers[i].style.display = "flex"; // Show the emote container } else { emoteContainers[i].style.display = "none"; // Hide the emote container } } }); 您好，这段代码正在运行，这里的代码在 HTML 页面上创建容器并将必要的信息写入这些容器。当此信息与页面上输入文本中写入的任何文本匹配时，会显示包含匹配文本的容器，而不会显示其他容器，但问题是当有 2000 或更多数据时，它会等待 5-10 秒，而寻找。我怎样才能使这个搜索算法更快？我找不到任何解决方案。有这方面经验的人可以帮我吗？谢谢！一种解决方案是避免改变每个元素的可见性，而是每次从头开始构建整个“表”的 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...">

javascript html css algorithm search

回答 1 投票 0

如果我想按字段（例如名称）搜索对象，我应该使用什么java数据结构？

我是Java新手。谁能帮我完成这个作业吗？公开课书{ 私有整数 ID；私有字符串标题；私有字符串作者；私有整数页面； } 什么 Java 数据

java arrays search data-structures set

回答 1 投票 0

OpenSearch Java 客户端 - 找到其他类似的文档吗？

我在 OpenSearch 中索引了许多文档。有人告诉我可以进行“相关文档”搜索，我可以在其中找到与 ID 为 X 的文档类似的文档，但是...

elasticsearch search opensearch amazon-opensearch

回答 1 投票 0

Powershell 通过查找仅位于行尾的特定单词来搜索并附加字符串中的文本

我有一堆 PNACH 文件，我一直在为在 PCSX2 上运行的 PS2 游戏集合而工作。完成后，我发现很难分辨“代码”块在哪里，因为