El Atributo ONSEARCH

El atributo onsearch está diseñado para elementos input del tipo search

El atributo onsearch está diseñado para elementos <input type="search"> y se activa cuando:

El usuario presiona Enter en el campo de búsqueda.
El usuario hace clic en el botón de "X" (para borrar el contenido en navegadores que lo soportan).

???? Sintaxis básica

<input 
    type="search" 
    id="miBuscador" 
    placeholder="Buscar..."
    onsearch="manejarBusqueda(event)"
>

Run HTML

// Método alternativo con JavaScript
document.getElementById("miBuscador").addEventListener("search", (event) => {
    // Lógica aquí
});

???? Características clave

Exclusivo para <input type="search">.
Detecta acciones explícitas de búsqueda (no se activa mientras se escribe).
Útil para ejecutar acciones cuando el usuario finaliza la entrada.

???? Ejemplos prácticos

1. Búsqueda básica con resultados

<input 
    type="search" 
    id="buscador" 
    placeholder="Buscar productos..."
    onsearch="buscarProductos(event)"
>
<div id="resultados"></div>

<script>
function buscarProductos(event) {
    const termino = event.target.value;
    const resultados = document.getElementById("resultados");
    
    // Simular búsqueda
    const productos = ["Zapatos", "Camisa", "Pantalón"];
    const filtrados = productos.filter(item => 
        item.toLowerCase().includes(termino.toLowerCase())
    );

    resultados.innerHTML = filtrados.length > 0 
        ? `<ul>${filtrados.map(p => `<li>${p}</li>`).join("")}</ul>`
        : "<p>No se encontraron resultados</p>";
}
</script>

Run HTML

2. Integración con API (Búsqueda en tiempo real)

<input 
    type="search" 
    id="buscadorApi" 
    onsearch="buscarEnAPI(event)"
>
<div id="resultadosApi"></div>

<script>
async function buscarEnAPI(event) {
    const termino = event.target.value;
    if (!termino.trim()) return;

    try {
        const respuesta = await fetch(`https://api.example.com/search?q=${termino}`);
        const datos = await respuesta.json();
        mostrarResultados(datos);
    } catch (error) {
        console.error("Error en la búsqueda:", error);
    }
}

function mostrarResultados(datos) {
    const contenedor = document.getElementById("resultadosApi");
    contenedor.innerHTML = datos.map(item => 
        `<div class="item">${item.nombre}</div>`
    ).join("");
}
</script>

Run HTML

3. Búsqueda con botón de limpieza personalizado

<div class="search-container">
    <input 
        type="search" 
        id="buscadorPersonalizado"
        onsearch="manejarAccion(event)"
    >
    <button onclick="limpiarBusqueda()">×</button>
</div>

<script>
function manejarAccion(event) {
    if (event.target.value === "") {
        limpiarResultados();
    } else {
        ejecutarBusqueda(event.target.value);
    }
}

function limpiarBusqueda() {
    const buscador = document.getElementById("buscadorPersonalizado");
    buscador.value = "";
    limpiarResultados();
}

function limpiarResultados() {
    console.log("Búsqueda limpiada");
    // Lógica para borrar resultados
}
</script>

<style>
.search-container {
    position: relative;
    width: 300px;
}
.search-container button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
}
</style>

Run HTML

⚠️ Consideraciones importantes

1. Compatibilidad

Navegador	Soporte	Detalles
Chrome	✅	Soporta evento al presionar Enter y al borrar
Firefox	⚠️	Solo funciona con Enter
Safari	✅	Soporta ambas acciones
Edge	✅	Comportamiento similar a Chrome

2. Alternativas para navegadores sin soporte completo

const buscador = document.getElementById("miBuscador");

// Detectar Enter (keyCode 13)
buscador.addEventListener("keypress", (event) => {
    if (event.key === "Enter") {
        ejecutarBusqueda(buscador.value);
    }
});

// Detectar borrado manual (no estándar)
buscador.addEventListener("input", (event) => {
    if (event.target.value === "") {
        limpiarResultados();
    }
});

???? Casos de uso avanzados

1. Búsqueda con debounce

let timeout;
buscador.addEventListener("search", (event) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
        buscarEnBaseDeDatos(event.target.value);
    }, 300); // Esperar 300ms tras la última acción
});

2. Búsqueda en múltiples campos

<input type="search" class="buscador-multi" placeholder="Nombre">
<input type="search" class="buscador-multi" placeholder="Categoría">

<script>
document.querySelectorAll(".buscador-multi").forEach(buscador => {
    buscador.addEventListener("search", (event) => {
        const filtros = {
            nombre: document.querySelector("[placeholder='Nombre']").value,
            categoria: document.querySelector("[placeholder='Categoría']").value
        };
        aplicarFiltros(filtros);
    });
});
</script>

Run HTML

???? Mejores prácticas

Accesibilidad:

<label for="buscador">Buscar:</label>
<input 
    type="search" 
    id="buscador" 
    aria-label="Campo de búsqueda"
    role="searchbox"
>

Run HTML
Optimización de rendimiento:
- Limitar llamadas a APIs con debounce/throttle.
- Usar requestIdleCallback para búsquedas no críticas.

Manejo de estados vacíos:

function ejecutarBusqueda(termino) {
    if (!termino.trim()) {
        mostrarError("Ingrese un término válido");
        return;
    }
    // Resto de la lógica
}

???? Conclusión

El atributo onsearch es útil para:

Implementar sistemas de búsqueda eficientes.
Crear interacciones específicas al confirmar una búsqueda.
Manejar acciones de limpieza de resultados.

Ejemplo final avanzado (Búsqueda predictiva):

<input 
    type="search" 
    id="buscadorPredictivo" 
    onsearch="buscar(event)"
    list="sugerencias"
>
<datalist id="sugerencias"></datalist>

<script>
const sugerencias = ["Apple", "Banana", "Cherry"];

function buscar(event) {
    const termino = event.target.value.toLowerCase();
    const lista = document.getElementById("sugerencias");
    
    // Filtrar sugerencias
    const coincidencias = sugerencias.filter(item => 
        item.toLowerCase().startsWith(termino)
    );
    
    // Actualizar datalist
    lista.innerHTML = coincidencias.map(item => 
        `<option value="${item}">`
    ).join("");
}
</script>

Run HTML

Con estos conceptos, podrás implementar sistemas de búsqueda robustos y amigables para el usuario. ¡Experimenta con diferentes enfoques! ????????