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:
