Почему разные результаты поиска в строке поиска объединяются

Question

Я работаю над сайтом, на котором глючит панель поиска. Я не могу найти решение и надеюсь, что некоторые из вас, ребята, знают решение. Это видео о моей проблеме. Видео показывает, как я могу набрать три разных строки поиска, но подсказки всегда идут в нижнем элементе, хотя на моем Javascript он явно «общается» с другим элементом с другим идентификатором: https://www.youtube.com/watch?v=jhi3t2mqHuo This скрипт для нижней панели поиска (одинаковый для обеих других панелей поиска, вместо этого его разные идентификаторы вызываются для элементов <input> и <ul>.

<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" на совершенно новую переменную во всех ваших сценариях, которая выглядит следующим образом. Затем также измените текст «ybComplete» в ссылке tag.sr c на то же, что и имя новой переменной.