CODEWITHSUNDEEP
javascripthtmlcsssearch
bulletproof
bulletproof

Reputation: 27

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>

Upvotes: 1

Views: 8149

Answers (4)

Justin Meskan
Justin Meskan

Reputation: 683

Isn't there a JS

String.search(/regex/);

(Rhetorical Question) It takes a regular expression as its argument.

Upvotes: 0

d.coder
d.coder

Reputation: 2038

Please correct your 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.

Upvotes: 1

Joyson
Joyson

Reputation: 380

Work with more concentrate you have missed the clossing tags at the link and the data needed to show the link

 if(pos!=-1) { 
    list= list + '<a class="search_lnk" href="' + terms[i]['des'] + '">'+terms[i]['des']+'</a>' + '<br>'; }   
    pos=-1;
 }

Upvotes: 0

Dimag Kharab
Dimag Kharab

Reputation: 4519

Just correct this line, it will work as expected ( for some reason it will not run here correctly in the test console of SO, but its working fine on html page)

 if(pos!=-1) { 
   list= list + '<a class="search_lnk" href="' + terms[i]['des']+ '">'+terms[i]['des']+ '</a>' + '<br>'; 
 } 


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>

Upvotes: 1

Related Questions