Making searchbar change languages

  Kiến thức lập trình

I have a an option on an html website that makes it so the user can change languages. When the language is changed all the text on the website changes to that language, inluding the dropdown autocomplete in the searchbar. The problem is that all the text on the website instantly changes language while the autocomplete only changes after you refresh the page. Is there a way to fix that?

const langEls = [...document.querySelectorAll(".lang")];
const titleEl = document.querySelector(".title");
const textEl = document.querySelector(".text");

let availableKeywords = {
  en: [
    'exapmle 1',
    'example 2'
  ],
  es: [
    'ejemplo 1',
    'ejemplo 2'
  ]
};

const chosenLanguage = localStorage.getItem('lang') || 'en';
document.querySelector(`.langWrap [data-lang="${chosenLanguage}"]`).classList.add('active')

const i18n = {
  en: {
    title: "Hello",
    text: "example"
  },
  es: {
    title: "Hola",
    text: "ejemplo"
  }
}

titleEl.textContent = i18n[chosenLanguage].title;
textEl.textContent = i18n[chosenLanguage].text;

langEls.forEach(el => {
  el.addEventListener('click', () => {
     const lang = el.dataset.lang;
    langEls.forEach(langEl => langEl.classList.remove('active'));
    el.classList.add('active');
    titleEl.textContent = i18n[lang].title;
    textEl.textContent = i18n[lang].text;
     localStorage.setItem('lang', lang);
  });
});

const resultsBox = document.querySelector(".result-box");
const inputBox = document.getElementById("query");
  
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 = '';
}

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 = '';
  }
}
<div class="searchbar">
         <form id="form" role="search">
           <input type="text" id="query" name="q" placeholder="Search Here..." aria-label="Search through site content" autocomplete="off">
           <button>
             <span class="icon">
                <ion-icon name="search-outline"></ion-icon>
             </span>
           </button>
         </form>
         <div class="result-box">
         </div>
       </div>

<h3 class="title">Hello</h3>
<p class="text">example</p>

<div class="langWrap">
        <a href="#" data-lang="nl" class="lang">NL</a>
        <a href="#" data-lang="en" class="lang">EN</a>
        <a href="#" data-lang="es" class="lang">ES</a>
        <a href="#" data-lang="id" class="lang">ID</a>
</div>

<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

The snippet doesnt work on stackoverflow since it cant be stored to the localstorage on here. But is there a way to make it so the available keywords also change language instantly without there being a need to refres the page?

LEAVE A COMMENT