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

【问题标题】：Why does different search bar output merge together为什么不同的搜索栏输出合并在一起
【发布时间】：2020-07-07 13:03:20
【问题描述】：

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

【问题讨论】：

您是否对所有搜索栏重复使用函数ybComplete？您需要唯一的回调名称。
非常感谢，我让它工作了，如果其他人有同样的问题，只需将 ybComplete 变量和 tag.src 链接中的 ybComplete 更改为与变量相同。再次感谢巴尔玛 :)

标签： javascript html web search search-engine

【解决方案1】：

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

【讨论】：