为什么不同的搜索栏输出会合并在一起

Question

我正在开发一个搜索栏被窃听的网站。我找不到解决方案，希望你们中的一些人知道解决方案。这是一个关于我的问题的视频。视频显示了我如何键入三个不同的搜索栏，但建议总是出现在底部元素中，尽管在我的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>

Answer 1

由于Barmar，我发现的问题的解决方案是将所有脚本上的"ybComplete"变量更改为一个全新的变量，如下所示。然后将tag.src链接中的"ybComplete"文本更改为与新变量名相同的文本。