我在一个网站上工作,搜索栏有问题。我找不到解决方案,希望你们中的一些人知道解决方案。这是关于我的问题的视频。该视频显示了如何在三个不同的搜索栏中键入内容,但建议始终位于底部元素中,即使在我的Javascript上,它显然正在“与其他具有另一个ID的元素进行对话”:https://www.youtube.com/watch?v=jhi3t2mqHuo
这是底部搜索栏的脚本(其他两个搜索栏的脚本相同,只是在<input>
和<ul>
元素上调用了不同的ID。
<form method="POST" class="search-bar step-search-bar">
<input id="how-searchTerm" class="search-bar-input step-search-bar-input" type="text" placeholder="What are you looking for?" autocomplete="off">
<input class="search-bar-btn step-search-bar-btn" type="submit" value="Search"></input>
<ul id="how-quickipedia_output"></ul>
<script>
var yb = { id : function(str){return document.getElementById(str)} };
yb.id('how-searchTerm').focus();
var tag = '';
yb.id('how-searchTerm').onkeyup = function(e){
if(!e.keyCode.toString().match(/^(37|38|39|40|13|16|17|18|224)$/)){
if(tag!==''){ document.body.removeChild(tag); }
tag = document.createElement('script');
var term = yb.id('how-searchTerm').value;
tag.src = 'http://en.wikipedia.org/w/api.php?action=opensearch&limit=10&format=json&callback=ybComplete&search='+term;
document.body.appendChild(tag);
}
};
var ybComplete = function(data){
yb.id('how-quickipedia_output').innerHTML = '';
for(var i=0; i<5; i++){
if(data[1][i]){
yb.id('how-quickipedia_output').innerHTML += '<li><a href="http://en.wikipedia.org/wiki/' + data[1][i] + '" target="_blank">' + data[1][i] + '</a>' + data[2][i] + '</li>';
}
}
};
</script>
</form>