Estoy filtrando una lista con javascript. Mi código funciona sin problemas, pero cuando la lista constante supera los 100, el navegador se congela.
<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>¿Qué estoy haciendo mal y cómo puedo hacer que este código funcione para una lista de muchos más valores (> 50.000)?
A ver si esto ayuda para empezar:
filterVal en minúsculas fuera del bucle .filter . No hay necesidad de hacer eso para cada elemento de la list .innerHTML una vez (en lugar de borrarlo y luego agregarlo). 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(""); };En el futuro, es posible que desee pensar en un marco como React (o algo más liviano como Svelte o Mithril) en lugar de construir su HTML a mano.
Esto es especialmente cierto ya que un cliente llamado <script>alert("hello")</script> actualmente causará estragos en su sitio. :-)