Simple search function with Javascript

Comments

var terms = new Array();
var max = 6;
 
for (i=1;i<=max;i++) { 
 terms[i] = new Array();
}
 
terms[1]['search'] = 'google internet search web'; 
terms[1]['des'] = 'Google search'; 
terms[1]['lnk'] = 'http://www.google.com';
terms[2]['search'] = 'gmx mail email'; 
terms[2]['des'] = 'GMX Mail'; 
terms[2]['lnk'] = 'http://www.gmx.com';
terms[3]['search'] = 'web mail email'; 
terms[3]['des'] = 'Web Mail'; 
terms[3]['lnk'] = 'http://www.web.com';
terms[4]['search'] = 'youtube video your self'; 
terms[4]['des'] = 'Youtube Video'; 
terms[4]['lnk'] = 'http://www.youtube.com';
terms[5]['search'] = 'wikipedia search knowledge'; 
terms[5]['des'] = 'Wikipedia'; 
terms[5]['lnk'] = 'http://www.wikipedia.com';
terms[6]['search'] = 'facebook social'; 
terms[6]['des'] = 'Facebook'; 
terms[6]['lnk'] = 'https://www.facebook.com';
 
function search() {
 var input = document.getElementById('searchbar').value.toLowerCase();
 var i=0;
 var list="";
 var pos=-1;
 
 if(input!="") { 
 for(i=1; i<=max; i++) { 
 pos= terms[i]['search'].indexOf(input);
			
			console.log(terms[i]['search']+pos); 
 
 if(pos!=-1) { 
 list= list + '<a class="search_lnk" href="' + terms[i]['des']+ '">'+terms[i]['des']+ '</a>' + '<br>'; 
 } 
 pos=-1;
 }
		
		console.log(list);
 
 if(list==""){ 
 document.getElementById("listing").innerHTML = "";
 document.getElementById("listing").style.display = "none";
 } else { 
 document.getElementById("listing").innerHTML = list;
 document.getElementById("listing").style.display = "block";
 }
 }
}

.cont_ges { 
 border: 1px dotted #0080FF;
 border-radius:10px;
 position:absolute;
 width:220px;
 height:46px; 
 left:50%;
 top:50%;
 margin-left:-110px;
 margin-top:-23px;
}
 
.ubers { 
 font-size:18px;
 color:#800080;
 font-weight:bold;
 font-style:italic;
 text-align:center;
 position:absolute;
 width 100%;
 height:22px;
 left:0px;
 top:0px;
 margin-top:-25px;
}
 
.such_lnk { 
 font-size:16px;
 color:#FF8000;
 font-style:italic;
 text-decoration: none;
}
 
.suche_lnk a:hover { 
 color:#FFFF00;
 text-decoration: underline;
 z-index:10;
}
#listing {
 position:absolute;
 left:5px;
 top:35px;
 width: 120%;
 overflow:auto;
}
#searchbar{
 position:absolute;
 left:5px;
 width:90%;
}

 <div class="cont_ges">
 <span class="ubers">Enter</span>
 <input id="searchbar" type="text" value="Search.." onClick="this.value='';" onKeyup="search();">
 <div id="listing"></div>
 </div>

Comments

Comments

Comments