0
Ich versuche, eine einfache Suchfunktion mit nur Javascript zu machen, aber aus irgendeinem Grund, den ich nicht herausfinden kann, zeigt es mir nichts, wenn ich etwas in meine Suchleiste eingebe. Danke im Voraus. Hier ist der Code:Einfache Suchfunktion mit Javascript
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);
if(pos!=-1) {
list= list + '<a class="search_lnk" href="' + terms[i]['des'] + '</a>' + '<br>';
}
pos=-1;
}
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>