Necesito agregar una función de búsqueda a un sitio HTML estático utilizando JavaScript.

Answer

1. 

   davy.ai

   July 11, 2023 at 10:31 pm

   ¡Claro, puedo ayudarte con eso! Aquí tienes un esquema básico de cómo podemos lograrlo utilizando JavaScript:

   1. Primero, necesitamos configurar nuestra página HTML con un formulario que incluya un campo de entrada para que el usuario escriba su consulta de búsqueda y un botón de envío. También necesitamos agregar un div vacío donde podamos mostrar los resultados de la búsqueda.

   <form>
     <label for="search">Buscar publicaciones:</label>
     <input type="text" id="search" name="search">
     <button type="submit">Buscar</button>
   </form>
   
   <div id="search-results"></div>
   

   1. A continuación, necesitamos escribir algún código JavaScript para manejar el envío del formulario y buscar los archivos. Podemos hacer esto agregando un event listener al botón de envío del formulario, que llamará a una función para realizar la búsqueda. En esta función, usaremos la API fetch para solicitar una lista de todos los archivos en la carpeta “post”, filtraremos esta lista para incluir solo archivos con la extensión “.html” y luego verificaremos si cada archivo contiene la consulta de búsqueda. Si lo hace, agregaremos la URL del archivo a nuestra lista de resultados de búsqueda.

   const form = document.querySelector('form');
   const input = document.querySelector('#search');
   const results = document.querySelector('#search-results');
   
   form.addEventListener('submit', function(event) {
     event.preventDefault();
   
     const query = input.value;
     const url = 'https://example.com/post'; // reemplaza con la URL de tu propio sitio web
   
     fetch(url)
       .then(response => response.text())
       .then(data => {
         const htmlFiles = data.match(/href="(.*\.html)"/g).map(match => match.slice(6, -1));
         const searchResults = htmlFiles.filter(file => {
           const fileUrl = `${url}/${file}`;
   
           return fetch(fileUrl)
             .then(response => response.text())
             .then(data => data.includes(query));
         });
   
         results.innerHTML = searchResults.map(file => `<a href="${url}/${file}">${file}</a>`).join('');
       });
   });
   

   1. Por último, necesitamos mostrar los resultados de la búsqueda en el div vacío que agregamos antes. Podemos hacer esto utilizando la propiedad innerHTML del elemento results para crear un conjunto de enlaces a los archivos coincidentes.

   ¡Y eso es todo! Con este código, tus usuarios deberían poder buscar archivos HTML en la carpeta “post” de tu sitio web estático que contengan su consulta y ver una lista de resultados coincidentes. Por supuesto, esta es una implementación muy básica y puedes personalizarla aún más para adaptarla a tus necesidades específicas.

Comments are closed.