带有 Javascript 的简单搜索功能

Question

我正在尝试仅使用 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>

Answer 1

请更正你的search函数：

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";
        }
    }
}

工作demo。

Answer 2

只要纠正这一行，它就会按预期工作（由于某种原因，它不会在 SO 的测试控制台中正确运行，但在 html 页面上工作正常）

 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>

Answer 3

更加专注地工作，您错过了链接处的结束标签和显示链接所需的数据

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