语言切换时如何实现搜索栏自动补全无需刷新更新？

你的问题核心是：初始化时定义的chosenLanguage是常量，语言切换后未更新该变量，且未触发搜索逻辑刷新自动补全列表。以下是具体修改方案：

修改要点 #

• 将chosenLanguage从const改为let，允许语言切换时动态更新值
• 在语言切换的回调中，同步更新当前语言变量并触发搜索刷新自动补全
• 补充搜索框占位符的多语言支持，提升体验一致性

修改后的完整代码 #

JavaScript部分 #

const langEls = [...document.querySelectorAll(".lang")];
const titleEl = document.querySelector(".title");
const textEl = document.querySelector(".text");
const inputBox = document.getElementById("query");
const resultsBox = document.querySelector(".result-box");

let availableKeywords = {
  en: [
    'example 1',
    'example 2'
  ],
  es: [
    'ejemplo 1',
    'ejemplo 2'
  ],
  nl: [
    'voorbeeld 1',
    'voorbeeld 2'
  ],
  id: [
    'contoh 1',
    'contoh 2'
  ]
};

// 改为let，允许后续更新当前语言值
let chosenLanguage = localStorage.getItem('lang') || 'en';
document.querySelector(`.langWrap [data-lang="${chosenLanguage}"]`).classList.add('active')

const i18n = {
  en: {
    title: "Hello",
    text: "example",
    searchPlaceholder: "Search Here..."
  },
  es: {
    title: "Hola",
    text: "ejemplo",
    searchPlaceholder: "Buscar aquí..."
  },
  nl: {
    title: "Hallo",
    text: "voorbeeld",
    searchPlaceholder: "Zoek hier..."
  },
  id: {
    title: "Halo",
    text: "contoh",
    searchPlaceholder: "Cari di sini..."
  }
}

// 统一更新页面多语言内容的函数
function updatePageContent(lang) {
  titleEl.textContent = i18n[lang].title;
  textEl.textContent = i18n[lang].text;
  inputBox.placeholder = i18n[lang].searchPlaceholder;
  
  // 输入框有内容时，重新触发搜索更新自动补全列表
  if (inputBox.value.length > 0) {
    search();
  } else {
    // 输入框为空则清空结果框，避免旧内容残留
    resultsBox.innerHTML = '';
  }
}

// 初始化页面内容
updatePageContent(chosenLanguage);

langEls.forEach(el => {
  el.addEventListener('click', () => {
    const lang = el.dataset.lang;
    langEls.forEach(langEl => langEl.classList.remove('active'));
    el.classList.add('active');
    
    // 更新当前语言变量并存储到localStorage
    chosenLanguage = lang;
    localStorage.setItem('lang', lang);
    
    // 同步更新页面内容和自动补全
    updatePageContent(lang);
  });
});

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){
    // 使用更新后的chosenLanguage获取对应语言的关键词
    result = availableKeywords[chosenLanguage].filter((keyword)=>{
      return keyword.toLowerCase().includes(input.toLowerCase());
    });
  }
  display(result);

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

HTML部分（保持原代码即可） #

<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>

关键修改说明 #

1. 动态更新语言变量：把const chosenLanguage改为let，让变量可以在语言切换时同步更新，确保搜索逻辑使用最新语言的关键词。
2. 统一内容更新逻辑：新增updatePageContent函数，集中处理页面文本、占位符的更新，同时自动触发搜索，保证自动补全列表即时切换为对应语言。
3. 完善多语言覆盖：为NL、ID语言补充了关键词和文本翻译，确保所有语言选项都能正常工作。
4. 残留内容清理：语言切换时，若输入框为空则清空结果框，避免旧语言的自动补全内容残留。

内容的提问来源于stack exchange，提问作者Pascal