Issue
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
}
}
});
Hello, this code is working,The code here creates containers on an HTML page and writes the necessary information into these containers. When this information matches any text written to the input text on the page, the containers containing the matching text are shown and the others are not shown, but the problem is that when there is 2000 or more data, it waits 5-10 seconds while searching. How can I make this search algorithm faster?
I couldn't find any solution. Can someone with experience on this issue please help me? Thank you!
Solution
One solution is to avoiding altering the visibility of each element, but instead build the HTML of the whole "table" from scratch each time. So the initial load and the input handler would rely on the same HTML-building function.
The initial load would merely consist of loading the data into a global array, and use that array as a basis for reconstructing the HTML.
Here is a demo with 2000 entries:
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...">Answered By - trincot
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.