This idea comes to my head to create a simple search engine without any database and server side script. In this tutorial (well, I didn’t really mean tutorial, I just want to share my script) I tried to use only HTML5 and JavaScript to make this search engine.
The basic mechanism is, by using iframe and loop command, I tell the browser to collect all texts in paragraph elements on each html files I want. In this case, I have 4 html files. Each of them contains some text. The main script is in index.html file. When I type a word in search input box then click search button, the browser will load each one of these 4 html files and collect texts from it then store it in temp variable. This temporary variable will contain file address and file content. Then search script will look up on that temp variable to give the result. As the result, list of html files that contains searched word will appear as clickable link.
If you have any suggestion to improve this script, please leave your comment.
The main script is as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSIndexer by Zofia Kreasi</title>
<style>
div {
padding: 10px;
}
</style>
</head>
<body>
<div>
<iframe id="myframe" style="display: none;"></iframe>
<p id="result">Indexing results go here (in JSON format)</p>
<button onclick="indexit()">Index it</button>
</div>
<div>
<input placeholder="input a word" id="searchinput">
<button onclick="indexAndSearch()">Search</button>
<p id="searchresult">Search results...</p>
</div>
<div>
<h1>Note on how to use it:</h1>
<p>By clicking "Index it" button, JavaScript will collect and read html files as defined on this script then store it in temporary variable. As the result, stringified object of this index data will appear.</p>
<p>I've divided below text into 4 parts, each in single html page, respectively named 1.html, 2.html, 3.html and 4.html. Input some word from this text to search it. After clicking search button, the search result will appear below search input. Also you can click on search result and you will redirected to that page contains the result. Here is the complete text:</p>
<p style="color: blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<script>
var firstPage = 1;
var lastPage = 5;
var multivol = false;
var indexingFinished = false;
var currentPage = firstPage;
var manualpages = [];
var content = [];
function indexit(){
if(currentPage <= lastPage){
document.getElementById("result").innerHTML = "Searching...";
document.getElementById("myframe").src = currentPage + ".html";
document.getElementById("myframe").onload = function(){
var dW = document.getElementById("myframe").contentWindow;
var dD = document.getElementById("myframe").contentDocument;
var dDContent = "";
for(var s = 0; s < dD.getElementsByTagName("p").length; s++){
var tempString = dD.getElementsByTagName("p")[s].innerHTML;
dDContent += tempString + " ";
}
content.push({ address : dW.location.href, content : dDContent.toLowerCase() });
currentPage++;
indexit();
};
} else setTimeout(function(){
document.getElementById("result").innerHTML = JSON.stringify(content);
indexingFinished = true;
}, 100)
}
function search(){
document.getElementById("searchresult").innerHTML = "Searching..."
var sinput = document.getElementById("searchinput").value;
if(content.length > 0){
var tempContent = "";
var resultCount = 0;
for(var i = 0; i < content.length; i ++){
if(content[i].content.indexOf(sinput) > -1){
tempContent += "Result found on: <a href='"+content[i].address.split("/").pop()+"'>Page " + content[i].address.split("/").pop().split(".")[0] + "</a><br />";
resultCount += 1;
}
}
if(resultCount == 0) tempContent = "No result found.";
document.getElementById("searchresult").innerHTML = tempContent;
//reset indexer
content = [];
currentPage = firstPage;
} else document.getElementById("searchresult").innerHTML = "No index data."
}
function indexAndSearch(){
indexit();
var tempTimer = setInterval(function(){
if(indexingFinished){
search();
indexingFinished = false;
clearInterval(tempTimer);
}
}, 100)
}
</script>
</body>
</html>