我的搜索栏与其他输入和列表项冲突

Question

我有一个完全适用于js小提琴的搜索栏，但是在测试网站上实现后，它开始与其他一些输入和未排序的列表元素冲突，我相信问题来自JavaScript文件。我试图指定ul和输入它应该目标，但它打破了，并没有工作。我需要有人帮忙帮我试一试。下面是完美的html和js fie，但如果一个人可以给JavaScript输入和ul类它应该影响并希望它有效，那将是非常值得赞赏的。请帮助我，我需要这个。

这是html文件

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>

            <form class="">
                <div class="search form-group">
                  <input type="text" id="searchBox" class="search-field search__input" placeholder="Search" autoFocus autocomplete="off"/>
                  <button class="fa fa-search search__button"></button>
                    <ul id="searchResults" class="term-list hidden"></ul>
                </div>
            </form>

这是javascript文件

    var searchIndex = ["404 Error", "Address Bar", "Ajax", "Apache", "Autoresponder", "BitTorrent", "Blog", "Bookmark", "Bot", "Broadband", "Captcha", "Certificate", "Client", "Cloud", "Cloud Computing", "CMS", "Cookie", "CSS", "Cyberspace", "Denial of Service", "DHCP", "Dial-up", "DNS Record", "Domain Name", "Download", "E-mail", "Facebook", "FiOS", "Firewall", "FTP", "Gateway", "Google", "Google Drive", "Gopher", "Hashtag", "Hit", "Home Page", "HTML", "HTTP", "HTTPS", "Hyperlink", "Hypertext", "ICANN", "Inbox", "Internet", "InterNIC", "IP", "IP Address", "IPv4", "IPv6", "IRC", "iSCSI", "ISDN", "ISP", "JavaScript", "jQuery", "Meta Search Engine", "Meta Tag", "Minisite", "Mirror", "Name Server", "Packet", "Page View", "Payload", "Phishing", "POP3", "Protocol", "Scraping", "Search Engine", "Social Networking", "Socket", "Spam", "Spider", "Spoofing", "SSH", "SSL", "Static Website", "Twitter", "XHTML"];

    var input = document.getElementById("searchBox"),
      ul = document.getElementById("searchResults"),
      inputTerms, termsArray, prefix, terms, results, sortedResults;


    var search = function(e) {
      if (e.which == 40 || e.which == 38) return;
      inputTerms = input.value.toLowerCase();
      results = [];
      termsArray = inputTerms.split(' ');
      prefix = termsArray.length === 1 ? '' : termsArray.slice(0, -1).join(' ') + ' ';
      terms = termsArray[termsArray.length - 1].toLowerCase();

      for (var i = 0; i < searchIndex.length; i++) {
        var a = searchIndex[i].toLowerCase(),
          t = a.indexOf(terms);

        if (t > -1) {
          results.push(a);
        }
      }

      evaluateResults();
    };

    var evaluateResults = function() {
      if (results.length > 0 && inputTerms.length > 0 && terms.length !== 0) {
        sortedResults = results.sort(sortResults);
        appendResults();
      } else if (inputTerms.length > 0 && terms.length !== 0) {
        ul.innerHTML = '' + /* inside the colom is where the text for wrong searches */
          inputTerms +
          ''; /* inside the colom is where the text for wrong searches */

      } else if (inputTerms.length !== 0 && terms.length === 0) {
        return;
      } else {
        clearResults();
      }
    };

    var sortResults = function(a, b) {
      if (a.indexOf(terms) < b.indexOf(terms)) return -1;
      if (a.indexOf(terms) > b.indexOf(terms)) return 1;
      return 0;
    }

    var appendResults = function() {
      clearResults();
      for (var i = 0; i < sortedResults.length && i < 5; i++) {
        var _li = document.createElement("li"),
          result = prefix +
          sortedResults[i].toLowerCase().replace(terms, '<strong>' + terms + '</strong>');

        _li.innerHTML = result;

        ul.appendChild(_li);
      }

      li = $('li');
      liSelected = li.filter('.selected');
      $('li').click(function(e) {
        $('input').val($(this).text());
      });
      if (ul.className !== "term-list") {
        ul.className = "term-list";
      }
    };

    var clearResults = function() {
      ul.className = "term-list hidden";
      ul.innerHTML = '';
    };

    input.addEventListener("keyup", search, false);





    var li = $('li');
    var liSelected;
    $(window).keydown(function(e) {
      if (e.which === 40) {
        if (liSelected) {
          liSelected.removeClass('selected');
          next = liSelected.next();
          if (next.length > 0) {
            liSelected = next.addClass('selected');
          } else {
            liSelected = li.eq(0).addClass('selected');
          }
        } else {
          liSelected = li.eq(0).addClass('selected');
        }
        liSelected.trigger('click');
      } else if (e.which === 38) {
        if (liSelected) {
          liSelected.removeClass('selected');
          next = liSelected.prev();
          if (next.length > 0) {
            liSelected = next.addClass('selected');
          } else {
            liSelected = li.last().addClass('selected');
          }
        } else {
          liSelected = li.last().addClass('selected');
        }
        liSelected.trigger('click');
      }

    });