Making searchbar change languages

April 4, 2024

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/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

The snippet doesnt work on stackoverflow since items cant be stored in localStorage on here. But is there a way to make it so the autocomplete (available keywords) changes to the chose language without having to refresh the page?

>Solution :

To achieve what you want you need to change a couple of thing:

Change the const for the chosenLanguage to be a let.
Set the chosenLanguage to the new language when changed.
Call the search function when you select a new function.

Code

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'
 ]
};

let 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);
    chosenLanguage = lang
    search()
 });
});

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 = '';
 }
}