I am filtering a list with javascript. My code works without issues but when the list const gets greater than 100 the browser freezes.
<div id="domList" class="flex flex-col p-8 space-y-4 bg-white shadow rounded-xl">
<?php foreach ($clients as $client): ?>
<a href="<?=base_url();?>/clients/<?=$client->id;?>" class="flex justify-between p-4 bg-gray-100 rounded item hover:bg-gray-200">
<div class="flex items-center"><span class="mr-2 text-xs text-gray-400"><?=$client->customernumber;?></span> <?=$client->fn;?> <?=$client->ln;?></div>
<div class="ml-2 py-1 px-2 text-xs flex-shrink-0 flex justify-center items-center text-white <?=$client->status_bg;?> rounded"><?=$client->status;?></div>
</a>
<?php endforeach;?>
</div>
<script type="text/javascript">
const list = <?=json_encode($clients);?>;
const filterEventHandler = (event) => {
const filterVal = event.target.value;
const domList = document.getElementById('domList');
domList.innerHTML = '';
const newList = list.filter((e) =>
e.customernumber.toLowerCase().includes(filterVal.toLowerCase()) ||
(e.fn + " " +e.ln).toLowerCase().includes(filterVal.toLowerCase())
);
newList.forEach(user => domList.innerHTML += buildItem(user));
}
const buildItem = (user) => {
const item = `
<a href="<?=base_url();?>/clients/${user.id}" class="flex justify-between p-4 bg-gray-100 rounded item hover:bg-gray-200">
<div class="flex items-center"><span class="mr-2 text-xs text-gray-400">${user.customernumber}</span> ${user.fn} ${user.ln}</div>
<div class="ml-2 py-1 px-2 text-xs flex-shrink-0 flex justify-center items-center text-white ${user.status_bg} rounded">${user.status}</div>
</a>`;
return item;
}
</script>
What am I doing wrong and how can I make this code working for a list of much more values (> 50.000).
See if this helps to begin with:
filterVal out of the .filter loop. There's no need to do that for each item in list.innerHTML once (instead of clearing it and then appending to it).const filterEventHandler = (event) => {
const filterVal = event.target.value.toLowerCase();
const htmlFragments = list
.filter(
(e) =>
e.customernumber
.toLowerCase()
.includes(filterVal) ||
`${e.fn} ${e.ln}`.toLowerCase().includes(filterVal),
)
.map(buildItem);
const domList = document.getElementById("domList");
domList.innerHTML = htmlFragments.join("");
};
Going forward, you may want to think about a framework such as React (or something lighter-weight like Svelte or Mithril) instead of building your HTML by hand.
That is especially true since a customer named <script>alert("hello")</script> will presently cause havoc on your site. :-)