bulletproof bulletproof - 3 months ago 29
CSS Question

Simple search function with Javascript

I am trying to make a simple search function with just javascript but for some reason which I cant figure out it doesnt show me anything when I enter something into my Searchbar. Thanks in advance. Here is the Code:



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>




Answer

Please correct you search function:

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) { 

                // You have error in this line
                list= list + '<a class="search_lnk" href="'+terms[i]['lnk']+'">' + 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";
        }
    }
}

Working demo.