我有一个html网站上的选项，使它使用户可以改变语言.当语言更改时，网站上的所有文本都会更改为该语言，包括搜索栏中的自动完成功能.问题是，网站上的所有文本都会立即更改语言，而自动完成功能只会在您刷新页面后更改.有办法解决吗？
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>代码段在stackoverflow上不起作用，因为项目不能存储在这里的localStorage中.但是，有没有一种方法可以使自动完成(可用关键字)更改为所选的语言，而不必刷新页面？