Auto Search using JavaScript

Auto Search Using JavaScript

Details: Auto Search using JavaScript

When searching for information, humans use natural language processing to perform an auto search. Auto searches are performed by software that analyzes text, and produce a result based on the analysis. In the past, auto searches were performed manually by people using computers.

However, as people have become more educated and as computers have become more sophisticated, humans have shifted their focus to the manual aspects of auto searches. Currently, many scholars argue about the pros and cons of performing auto searches versus performing manual ones. According to a study published in 2017 in the journal Science Advances, humans are performing more than 500 billion auto searches per year. Therefore, it is crucial to understand how we perform these searches and what changes could improve our efficiency.

Interface: Auto Search using JavaScript

Auto Search program can help you search for data in a particular row. It has a code you can modify or adjust to suit your user experience. To have a better understanding of this app, just follow the procedure below. First, you download the bootstrap framework. Here’s the link for the download. https://getbootstrap.com/.

The code contains the point of interaction of the application. To make this simply compose these blocks of code inside the text editor and save as 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://sourcecodester.com">Sourcecodester</a>
		</div>
	</nav>
	<div class="col-md-3"></div>
	<div class="col-md-6 well">
		<h3 class="text-primary">Auto Search Using JavaScript</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<div class="col-md-4">
			<div class="form-group">
				<label>Enter a name</label>
				<div class="input-group">
					<div class="input-group-addon"><span class="glyphicon glyphicon-search"></span></div>
					<input type="text" id="search" placeholder="Search here..." onkeyup="autoSearch()" class="form-control"/>
				</div>
			</div>
		</div>
 
		<table class="table table-bordered">
			<thead class="alert-info">
				<tr>
					<th>Member List</th>
				</tr>
			</thead>
			<tbody id="result"></tbody>
		</table>
		<ul class="list-group" id="list"></ul>
 
	</div>
<script src="js/script.js"></script>
</body>
</html>

Creating the Script: Auto Search using JavaScript

This code will search for a particular keyword automatically. To do this copy or write these codes in the text editor, and save it as script.js inside the js folder.

				
					var members = ['Tony Stark', 'Jin Mori', 'Luke Cage'];
 
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";
		}
	}
 
}