Estoy tratando de agregar una función de "cargar más" a una función de "búsqueda" que recupera datos de un archivo JSON. Encontré este javascript para Cargar más contenido al hacer clic en el botón:

 const loadmore = document.querySelector('#loadmore'); let currentItems = 2; loadmore.addEventListener('click', (e) => { const elementList = [...document.querySelectorAll('.results-cntr .search-result')]; for (let i = currentItems; i < currentItems + 2; i++) { if (elementList[i]) { elementList[i].style.display = 'block'; } } currentItems += 2; // Load more button will be hidden after list fully loaded if (currentItems >= elementList.length) { event.target.style.display = 'none'; } })

y este es el css:

 .search-result { display: none; } .results-cntr .search-result:nth-child(1) { display: block; } .results-cntr .search-result:nth-child(2) { display: block; }

Aquí está mi función de búsqueda que recupera datos de un archivo JSON:

 document.addEventListener('DOMContentLoaded', function (event) { const btn = document.getElementById('theButton'); const results = document.getElementById('results'); let data = []; let search_term = ''; fetch('/search.json') .then(response => response.json()) .then(data_server => { data = data_server; }); btn.addEventListener('click', event => { search_term = search.value.toLowerCase(); showList(); }); const showList = () => { results.innerHTML = ''; if (search_term.length <= 0) return; const match = new RegExp(`${search_term}`, 'gi'); let result = data.filter(name => match.test(name.meta_title) || match.test(name.meta_description)); if (result.length == 0) { const div = document.createElement('div'); div.innerHTML = `No results found`; results.appendChild(div); } result.forEach(e => { const div = document.createElement('div'); div.innerHTML = `<div class="search-result"> <a href="${e.url}"><h3 class="search-title">${e.meta_title}</h3></a> <p class="search-description">${e.meta_description}</p> <a href="${e.url}"><p class="search-url">&rsaquo; ${e.url}</p></a> </div>`; results.appendChild(div); }); }; });

Lo que estoy tratando de hacer es integrarlos juntos, buscar y cargar más contenido al hacer clic en el botón, pero está más allá de mis capacidades. Cualquier ayuda es muy apreciada. Gracias.