How to create pure JavaScript based search engine?
Creating search engine with JavaScript is that possible? Yes its possible to create local search engine for your website that means if user will search anything on your website at that time he will get relevant content and url.
Below I have attached screenshot and mentioned code for your reference
Complete code:
<html>
<head>
<script>
function showDetails(){
var query = document.getElementById("searchData").value;
var query1 = query.toLowerCase();
var data = [
{
"url" : "http://codelifo.blogspot.com/p/seo.html",
"keyword" : "SEO, on-page, off-page, backlinks",
"description" : "For SEO first do the proper on-page optimization. If not possible to do whole on-page optimization then do at least title and meta description optimization for your web-pages."
},
{
"url" : "http://codelifo.blogspot.com/p/html.html",
"keyword" : "mobile friendly website, responsive site, HTML",
"description" : "You can create 'mobile friendly web page' without media query. Yes its possible and below I have attached screenshot for desktop layout and pasted HTML code for your reference."
},
{
"url" : "http://codelifo.blogspot.com/p/javascript.html",
"keyword" : "Search engine, JavaScript tutorial, html",
"description" : "Create search search engine with help of JavaScript"
}
];
var text = "";
for(var i = 0; i < data.length; i++) {
var searchIn = data[i].keyword.toString();
if(searchIn.toLowerCase().indexOf(query1) > -1 && query1 != ""){
text += data[i].url + "<br>";
text += data[i].description + "<br><br>";
}
}
if(text==""){
document.getElementById("demo").innerHTML = "No result found";
} else{
document.getElementById("demo").innerHTML = text;
}
}
</script>
</head>
<body>
<div style="height:auto; margin-top:20%; overflow:hidden;">
<div style="width:300px; margin:0 auto;">
<input type="text" class="searchData" id="searchData" name="searchData">
<button onclick="showDetails();">Search</button>
</div>
</div>
<div id="demo"></div>
</body>
</html>
Creating search engine with JavaScript is that possible? Yes its possible to create local search engine for your website that means if user will search anything on your website at that time he will get relevant content and url.
Below I have attached screenshot and mentioned code for your reference
Complete code:
<html>
<head>
<script>
function showDetails(){
var query = document.getElementById("searchData").value;
var query1 = query.toLowerCase();
var data = [
{
"url" : "http://codelifo.blogspot.com/p/seo.html",
"keyword" : "SEO, on-page, off-page, backlinks",
"description" : "For SEO first do the proper on-page optimization. If not possible to do whole on-page optimization then do at least title and meta description optimization for your web-pages."
},
{
"url" : "http://codelifo.blogspot.com/p/html.html",
"keyword" : "mobile friendly website, responsive site, HTML",
"description" : "You can create 'mobile friendly web page' without media query. Yes its possible and below I have attached screenshot for desktop layout and pasted HTML code for your reference."
},
{
"url" : "http://codelifo.blogspot.com/p/javascript.html",
"keyword" : "Search engine, JavaScript tutorial, html",
"description" : "Create search search engine with help of JavaScript"
}
];
var text = "";
for(var i = 0; i < data.length; i++) {
var searchIn = data[i].keyword.toString();
if(searchIn.toLowerCase().indexOf(query1) > -1 && query1 != ""){
text += data[i].url + "<br>";
text += data[i].description + "<br><br>";
}
}
if(text==""){
document.getElementById("demo").innerHTML = "No result found";
} else{
document.getElementById("demo").innerHTML = text;
}
}
</script>
</head>
<body>
<div style="height:auto; margin-top:20%; overflow:hidden;">
<div style="width:300px; margin:0 auto;">
<input type="text" class="searchData" id="searchData" name="searchData">
<button onclick="showDetails();">Search</button>
</div>
</div>
<div id="demo"></div>
</body>
</html>
No comments:
Post a Comment