Question

我正在尝试使用javascript创建一个简单的搜索功能但由于某些原因我无法弄清楚当我在我的搜索栏中输入内容时它并没有显示任何内容。提前致谢。这是代码：

＆＃13;

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

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

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

更多的精力工作你错过了链接上的clossing标签和显示链接所需的数据

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

使用Javascript进行简单的搜索功能

3 个答案: