Javascript 可更改语言的搜索栏

//searchbar//
let availableKeywords = {
  en: [
      'biropen',
      'piglet',
      'piggyback',
      'bullet of the gun',
      'chewing gum'
  ],
  hu: [
      'golyóstoll',
      'kismalac',
      'hobby malacoglás',
      'puskagolyó',
      'rágógumi'
  ],
};

let chosenLanguage = 'en';

const resultsBox = document.querySelector(".result-box");
const inputBox = document.getElementById("query");

function search(){
  let result = [];
  let input = inputBox.value;
  if(input.length){
    result = availableKeywords[chosenLanguage].filter((keyword)=>{
      return keyword.toLowerCase().includes(input.toLowerCase());
    });
    console.log(result);
  }
  display(result);

  if(!result.length){
    resultsBox.innerHTML = '';
  }
}

inputBox.onkeyup = search;

function display(result){
  const content = result.map((list)=>{
    return "<li onclick=selectInput(this)>" + list + "</li>";
  });

  resultsBox.innerHTML = "<ul>" + content.join('') + "</ul>";
}

function selectInput(list){
  inputBox.value = list.innerHTML;
  resultsBox.innerHTML = '';
}

//buttons//
const langEl = [...document.querySelectorAll(".langWrap")];

langEl.forEach((el) => {
  el.addEventListener("click", () => {
    langEl.map(item => item.classList.contains("active") ? item.classList.remove("active") : false);
    el.classList.add("active");
    chosenLanguage = el.innerText;
    search();
  });
});

.langWrap.active {
    background-color: green;
}

.langWrap {
    cursor: pointer;
    padding: 5px;
}

ul#lang {
    display: contents;
}

ul#lang li {
    margin-bottom: 5px;
}

<ul id="lang">
    <li><span class="langWrap active">en</span></li>
    <li><span class="langWrap">hu</span></li>
</ul>
<input type="text" id="query" placeholder="type your search here">
<div class="result-box"></div>