Búsqueda Automática con JavaScript

Búsqueda Automática con JavaScript

En este código abordaremos la Búsqueda Automática con JavaScript. El programa permitirá buscar automáticamente los datos de una fila. Usted es libre de modificar y usar este código. Para obtener más información sobre esto, solo siga los pasos a continuación.

Empezando:
Primero debe descargar el marco de arranque, este es el enlace para el arranque que utilicé para el diseño del diseño https://getbootstrap.com/.

La interfaz principal
Este código contiene la interfaz de la aplicación. Para crear esto, simplemente escriba este bloque de código dentro del editor de texto y guárdelo como index.html.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
    </head>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <a class="navbar-brand" href="https://compubinarior.com">CompuBinario</a>
        </div>
    </nav>
    <div class="col-md-3"></div>
    <div class="col-md-6 well">
        <h3 class="text-primary">Búsqueda Automática con JavaScript</h3>
        <hr style="border-top:1px dotted #ccc;"/>
        <div class="col-md-4">
            <div class="form-group">
                <label>Ingrese un Nombre</label>
                <div class="input-group">
                    <div class="input-group-addon"><span class="glyphicon glyphicon-search"></span></div>
                    <input type="text" id="search" placeholder="Buscar aqui..." onkeyup="autoSearch()" class="form-control"/>
                </div>
            </div>
        </div>
        
        <table class="table table-bordered">
            <thead class="alert-info">
                <tr>
                    <th>Lista de Nombres</th>
                </tr>
            </thead>
            <tbody id="result"></tbody>
        </table>
        <ul class="list-group" id="list"></ul>
        
    </div>
<script src="js/script.js"></script>
</body>
</html>

Creando el Script
Este código contiene el script de la aplicación. El código buscará automáticamente una palabra clave específica. Para hacer esto, simplemente copie y escriba este bloque de códigos dentro del editor de texto, luego guárdelo como script.js dentro de la carpeta js.

var members = ['ACEVEDO JHONG', 'AREVALO LOPEZ', 'ARIAS HERNANDEZ', 'ALOCEN BARRERA', 'ALOSILLA VELAZCO VERA', 'ALCALÁ NEGRÓN'];
    
displayMember();

function displayMember(){
    members.sort(function(a,b){
        if(a < b){
            return -1;
        }
 
        if(a > b){
            return 1;
        }
 
        return 0;
    });
    
    data = "";
    
    for(var i=0; i < members.length; i++){
        data += "<tr><td>"+members[i]+"</td></tr>";
    }
    
    document.getElementById('result').innerHTML = data;
}

function autoSearch(){
    var search=document.getElementById('search').value.toLowerCase();
    var parent=document.getElementById("result");
    var children=parent.getElementsByTagName('tr');
    
    for(var i=0; i<children.length; i++){
        var keyword=children[i].innerText;
        if(keyword.toLowerCase().indexOf(search)>-1){
            children[i].style.display="";
        }else{
            children[i].style.display = "none";
        }
    }
    
}

Ahí lo tienes, creamos con éxito este tutorial de como hacer Búsqueda Automática con JavaScript. Espero que este sencillo tutorial te ayude a lo que estás buscando.

Antes de la descarga del Tutorial presiona el siguiente enlace para que te suscribas a nuestro Canal de YouTube:

SUSCRIBETE AL CANAL DE YOUTUBE AQUI !

Búsqueda Automática con JavaScript – Descargar el Tutorial en el siguiente enlace:

DESCARGAR AQUÍ

Deja una respuesta

Tu dirección de correo electrónico no será publicada.