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