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

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”文本更改为新变量名。