Cómo hacer un buscador en JavaScript

18/11/2023 · Actualizado: 13/12/2023

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

Si estás interesado en aprender cómo hacer un buscador en JavaScript, estás en el lugar correcto. En este artículo, te mostraré paso a paso cómo puedes crear tu propio buscador utilizando este lenguaje de programación.

Índice
  1. Paso 1: Configurar el archivo HTML
  2. Paso 2: Agregar el código JavaScript
  3. Conclusión

Paso 1: Configurar el archivo HTML

El primer paso para crear un buscador en JavaScript es configurar el archivo HTML. Debes crear un formulario en el cual los usuarios podrán ingresar su búsqueda. Puedes utilizar la siguiente estructura básica:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Buscador en JavaScript</title>
</head>
<body>

    <div class="search-container">
        <input type="text" id="searchInput" placeholder="Buscar...">
    </div>

    <ul id="resultList">
        <li>Elemento 1</li>
        <li>Elemento 2</li>
        <li>Elemento 3</li>
        <!-- Agrega más elementos según sea necesario -->
    </ul>

    <script src="script.js"></script>
</body>
</html>

Paso 2: Agregar el código JavaScript

Ahora que tienes la estructura básica del formulario, es hora de agregar el código JavaScript que hará que el buscador funcione. Puedes utilizar el siguiente código como punto de partida:

document.addEventListener("DOMContentLoaded", function () {
    var input = document.getElementById("searchInput");
    var list = document.getElementById("resultList");
    var items = list.getElementsByTagName("li");

    input.addEventListener("input", function () {
        var searchTerm = input.value.toLowerCase();

        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            var text = item.textContent.toLowerCase();

            if (text.includes(searchTerm)) {
                item.style.display = "block";
            } else {
                item.style.display = "none";
            }
        }
    });
});

Este ejemplo utiliza un input de texto para ingresar la consulta de búsqueda y una lista de elementos (<li>) que se filtran en tiempo real según lo que se escribe en el input. Puedes personalizar y adaptar este código según tus necesidades específicas.

Conclusión

Crear un buscador en JavaScript puede parecer complicado al principio, pero con los pasos adecuados y un poco de práctica, puedes lograrlo. Recuerda que este es solo un ejemplo básico y que puedes personalizar tu buscador según tus necesidades y preferencias. ¡Así que no dudes en experimentar y explorar todas las posibilidades que JavaScript te ofrece!

Pionera del caos

Ingeniera Informática con Máster en Bioinformática, casi doctora y freelancer. Todo lo que te cuento en este blog son aprendizajes que yo misma he tenido ya sea durante mis estudios o en otros proyectos!

Otras Entradas Relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *



Para continuar es necesario que confirmes la política de privacidad de la web.

Subir