1

Tengo un problema con un formulario de búsqueda. Me gustaría que en caso que el usuario ingrese una palabra que no sea la detallada en la función del archivo js el formulario no se envíe y el usuario permanezca en el mismo sitio.

function filtrarProductos() {
  // Obtener la consulta de búsqueda de la URL
  const urlParams = new URLSearchParams(window.location.search);
  const query = urlParams.get('q');

  // Si la consulta de búsqueda es "zapatilla", mostrar solo los productos de zapatilla
  if (query === 'zapatilla' || query === 'zapatillas') {
    const productos = document.querySelectorAll('.producto');
    for (let i = 0; i < productos.length; i++) {
      const producto = productos[i];
      if (!producto.classList.contains('zapatilla')) {
        producto.style.display = 'none';
      }
    }
  } 
  // Si la consulta de búsqueda es "camiseta", mostrar solo los productos de camiseta
  else if (query === 'camiseta' || query === 'camisetas') {
    const productos = document.querySelectorAll('.producto');
    for (let i = 0; i < productos.length; i++) {
      const producto = productos[i];
      if (!producto.classList.contains('camiseta')) {
        producto.style.display = 'none';
      }
    }
  } 
  // Si la consulta de búsqueda no es una palabra clave, prevenir el envío del formulario
  else {
    
    return false;

     }
}

filtrarProductos();
            <form action="total-productos.html" id="search-form" class="d-flex">
            
                <input type="text" name="q" class="form-control me-2" aria-label="Buscar" id="search-input" placeholder="Buscar..." pattern="[a-z\s]+" required>
            
                <button type="submit" class="btn btn-outline-success">Buscar</button>
            
            </form>

Apliqué un return false para evitar el envío del formulario en caso de una palabra incorrecta pero no funciona y me lleva total-productos.html

1
  • Utilicé un preventDefault en lugar de un false, hace que me quede en el sitio pero si ingreso la palabra correcta (ejemplo zapatilla) no me lleva a total-productos.html
    – Raul
    Commented el 21 mar. 2023 a las 18:19

1 respuesta 1

2

Te dejo un ejemplo mas dinámico, observando tu problema reestructure y cambie gran parte de la lógica y funcionamiento de tu código, ya que como lo tienes es muy reiterativo en cuanto a las comprobaciones. En este ejemplo hacemos y creamos un catalogo en donde puedes agregar mas productos al array y así evitar agregar mas condicionales por cada producto nuevo que se agregue, el código en JavaScript esta comentado para que lo comprendas.

//OBTENEMOS EL FORMULARIO DE BUSQUEDA MEDIANTE ID
const form = document.getElementById('search-form');

/*ESCUCHAMOS EL EVENTO DE ENVIO "SUBMIT" Y EJECUTAMOS LA FUNCION FILTRARPRODUCTOS*/
form.addEventListener('submit', filtrarProductos);

//DECLARAMOS LA FUNCION
function filtrarProductos(e) {
    //CREAMOS UN ARREGLO DONDE SE ENCUENTRAN LOS POSIBLES PRODUCTOS
  const catalogo = ['zapatillas', 'camisetas'];
  //alert('Formualrio enviado');
  //OBTENEMOS EL VALUE DEL INPUT "BUSQUEDA"
  var busqueda = document.getElementById('search-input').value;
  //console.log(busqueda)
  //VERIFICAMOS SI LA BUSQUEDA SE ENCUENTRA EN NUESTRO CATALOGO
   if (catalogo.indexOf(busqueda) > -1) {
   //EVITAMOS LA RECARGA DE LA PAGINA CON PREVENTDEFAULT
   e.preventDefault();
   //OBTENEMOS TODOS LOS PRODUCTOS
     const productos = document.querySelectorAll('.producto');
      for (let i = 0; i < productos.length; i++) {
        const producto = productos[i];
        //AQUI VALIDAMOS QUE COINCIDA LA BUSQUEDA CON SU CLASE ASIGNADA
        if (!producto.classList.contains(busqueda)) {
        //OCULTAMOS LOS QUE NO COINCIDEN
          producto.style.display = 'none';
        //MOSTRAMOS LOS QUE SI COINCIDEN
        }else{
             producto.style.display = 'block';
        }
    }
   }else{// SI LA BUSQUEDA FALLA, MOSTRAMOS DE NUEVO TODOS LOS PRODUCTOS
    //EVITAMOS LA RECARGA DE LA PAGINA CON PREVENTDEFAULT
     e.preventDefault();
     //ALERTA
     alert('No existe el producto')
     const productos = document.querySelectorAll('.producto');
     for (let i = 0; i < productos.length; i++) {
       const producto = productos[i];
       //MOSTRAMOS TODOS LOS PRODUCTOS
         producto.style.display = 'block';
     }
   }
}
<form action="total-productos.html" id="search-form" class="d-flex">

  <input type="text" name="q" class="form-control me-2" aria-label="Buscar" id="search-input" placeholder="Buscar..." pattern="[a-z\s]+" required>

  <button type="submit" class="btn btn-outline-success">Buscar</button>  

</form><br>


<div class="producto zapatillas">zapatillas 1</div>
<div class="producto zapatillas">zapatillas 2</div>
<div class="producto camisetas">camisetas 1</div>
<div class="producto camisetas">camisetas 2</div>
<div class="producto camisetas">camisetas 3</div>

Dime si te sirvió.

NOTA: Es sensible a espacios en blanco.

5
  • Hola Antonio, le quite el primer preventDefault porque no me cargaba la pagina si escribía una palabra que esté en el arreglo. Y tengo un problema, cuando pongo por ejemplo zapatillas me muestra zapatillas y camisetas, el display none quiero aplicarlo en las clases que no coincidan con la búsqueda. Por el tema de escribir incorrectamente la palabra funciona perfecto
    – Raul
    Commented el 22 mar. 2023 a las 17:34
  • Lo ejecutaste aquí?, porque tiene ese funcionamiento que indicas, si escribes zapatillas oculta camisetas y viceversa, si no coincide lo que buscas con lo existente en el array muestra de nuevo todo, no termino de entender cual es el error, si gustar editar tu pregunta con el nuevo código que tienes y especificando mas a detalle. Commented el 22 mar. 2023 a las 17:41
  • Es verdad el código funciona correctamente, debo tener algún error de sintaxis en el código que estoy usando. Gracias por tu ayuda
    – Raul
    Commented el 22 mar. 2023 a las 17:48
  • No sé cuál sería el problema que trato de buscar ej: 'zapatillas' y el buscador no funciona. Acá funciona perfecto pero en mi página no. Si le quito el primer preventDefault me carga la página total-productos.html pero me muestra todos los productos, no me filtra sólo los que busco.
    – Raul
    Commented el 22 mar. 2023 a las 18:51
  • Genera una nueva pregunta añadiendo el detalle del error y todo el código que tienes hasta el momento. Commented el 22 mar. 2023 a las 22:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.