Tengo una lista filtrada de trabajo usando JS, pero la cantidad de elementos de la lista está creciendo. Entonces, necesito dividir la lista en páginas, pero para que el filtro siga funcionando para toda la lista, incluso si el elemento de la lista no se muestra porque está en otra página.
He visto como hacer un botón de "anterior" y "siguiente" para la lista, pero descompone el filtro js, porque consiste básicamente en colocar los contenidos en diferentes divs, pero el filtro solo filtrará el primero.
Este es mi HTML ahora:
<section> <input type="text" id="barraBusqueda" onkeyup="buscar()" placeholder="Buscar artículos"> <ul id="articulos"> <li><a href="/es/blog/1.html">Article 1</a></li> <li><a href="/es/blog/2.html">Article 2</a></li> <li><a href="/es/blog/3.html">Article 3</a></li> <li><a href="/es/blog/4.html">Article 4</a></li> <li><a href="/es/blog/5.html">Article 5</a></li> <li><a href="/es/blog/6.html">Article 6</a></li> <li><a href="/es/blog/7.html">Article 7</a></li> <li><a href="/es/blog/8.html">Article 8</a></li> <li><a href="/es/blog/9.html">Article 9</a></li> <li><a href="/es/blog/10.html">Article 10</a></li> </ul> </section>Y mi JS:
function buscar() { // Declare variables var input, filter, ul, li, a, i, txtValue; input = document.getElementById("barraBusqueda"); filter = input.value.toUpperCase(); ul = document.getElementById("articulos"); li = ul.getElementsByTagName("li"); // Loop through all list items, and hide those who don't match the search query for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; txtValue = a.textContent || a.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } }Funciona bien, pero todos los elementos deben mostrarse, y no quiero un desplazamiento eterno a través de docenas de elementos de la lista.
El objetivo sería que el navegador solo muestre 5 elementos de la lista a la vez, con un botón siguiente y anterior para navegar por ellos, pero que el filtro considere todos los elementos de la lista, incluso los que están en otras páginas.
Recomendaría separar los datos de la representación. Esto facilita la combinación de filtrado y paginación.
Como primer paso, crearía una matriz de objetos que describieran la lista de entradas. En esta matriz puede realizar el filtrado. En segundo lugar, escribiría una función que represente las entradas de la lista. De esta manera, no tiene que ocultar elementos HTML, solo muestra aquellos que coinciden con su filtro y/o página.
Por favor, eche un vistazo a este ejemplo de trabajo (incompleto):
// The maximum size of a single page const pageSize = 5; // All list entries (unfiltered) const data = [ { name: 'Article 1', url: '/es/blog/1.html' }, { name: 'Article 2', url: '/es/blog/2.html' }, { name: 'Article 3', url: '/es/blog/3.html' }, { name: 'Article 4', url: '/es/blog/4.html' }, { name: 'Article 5', url: '/es/blog/5.html' }, { name: 'Article 6', url: '/es/blog/6.html' }, { name: 'Article 7', url: '/es/blog/7.html' }, { name: 'Article 8', url: '/es/blog/8.html' }, { name: 'Article 9', url: '/es/blog/9.html' }, { name: 'Article 10', url: '/es/blog/10.html' }, { name: 'Article 11', url: '/es/blog/11.html' }, { name: 'Article 12', url: '/es/blog/12.html' }, { name: 'Article 13', url: '/es/blog/13.html' }, { name: 'Article 14', url: '/es/blog/14.html' }, ]; // The filtered data; initially equal to `data`; // modified by function filter() let filteredData = data; // The current page index let currentPage = 0; // Adds/removes the `disabled` attribute from the element by // specified ID according to the `disabled` flag function updateButtonState(id, disabled) { const button = document.getElementById(id); if (disabled) { button.setAttribute('disabled', 'true'); } else { button.removeAttribute('disabled'); } } // Updates the states of the Previous/Next buttons function updateButtonStates() { updateButtonState('btn-prev', currentPage === 0); updateButtonState('btn-next', (currentPage + 1) * pageSize >= filteredData.length); } // Filters the `data` array according to the given text function filter(text) { filteredData = data.filter(entry => entry.name.includes(text)); renderPage(currentPage); } // Renders a single page, using the `filteredData` array function renderPage(pageNo) { currentPage = pageNo; const elList = document.getElementById('list'); elList.innerHTML = ''; const offset = pageNo * pageSize; for (let i = offset; i < offset + pageSize && i < filteredData.length; i++) { const entry = filteredData[i]; const li = elList.appendChild(document.createElement('li')); const anchor = li.appendChild(document.createElement('a')); anchor.innerHTML = entry.name; anchor.href = entry.url; } updateButtonStates(); } // Render first page initially renderPage(0); <input type="text" onkeyup="filter(this.value)"> <ul id="list"> </ul> <button id="btn-prev" onclick="renderPage(currentPage - 1)">Previous</button> <button id="btn-next" onclick="renderPage(currentPage + 1)">Next</button> Pruébelo ingresando 1 en el campo de búsqueda.