如何实现支持语言切换的带自动补全功能的搜索栏

嗨，刚接触JavaScript完全不用慌，你的需求完全可以实现哒！我来一步步帮你梳理怎么把语言切换和自动补全搜索栏结合起来～

核心思路 #

你之前的自动补全是基于固定的关键词列表，要支持语言切换，核心就是按语言分类存储关键词，然后在切换语言时更新当前使用的关键词列表，同时同步更新搜索补全的结果。

具体实现步骤 #

1. 重构关键词存储方式

把原来的单一数组改成按语言分组的对象，这样切换语言时直接调取对应语言的关键词即可：

// 按语言分类存储关键词，可根据需求新增更多语言
const keywordMap = {
  en: ['example1', 'example2', 'example3'],
  zh: ['示例1', '示例2', '示例3'],
  fr: ['exemple1', 'exemple2', 'exemple3']
};

// 默认使用英文关键词
let availableKeywords = keywordMap.en;

2. 给语言切换按钮添加交互逻辑

假设你的语言切换按钮是这样的（给每个按钮加data-lang属性来标记对应语言）：

<button data-lang="en">English</button>
<button data-lang="zh">中文</button>
<button data-lang="fr">Français</button>

然后给按钮绑定点击事件，切换关键词列表并同步更新搜索结果：

// 获取所有语言切换按钮
const langButtons = document.querySelectorAll('[data-lang]');
// 获取搜索相关元素（和你原来的代码保持一致）
const resultsBox = document.querySelector(".result-box");
const inputBox = document.getElementById("query");

langButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 获取当前选中的语言标识
    const selectedLang = this.getAttribute('data-lang');
    // 更新当前可用的关键词列表
    availableKeywords = keywordMap[selectedLang];

    // 给选中的按钮加个高亮样式（可选，提升用户体验）
    langButtons.forEach(btn => btn.classList.remove('active'));
    this.classList.add('active');

    // 如果搜索框已有内容，重新触发自动补全
    if (inputBox.value.trim().length > 0) {
      const input = inputBox.value;
      const result = availableKeywords.filter(keyword => {
        return keyword.toLowerCase().includes(input.toLowerCase());
      });
      display(result);
    } else {
      // 搜索框为空时清空结果框
      resultsBox.innerHTML = '';
    }
  });
});

3. 保留原有自动补全逻辑（仅需少量调整）

你原来的自动补全逻辑基本可以复用，只需要确保availableKeywords是我们动态更新的变量就行：

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

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

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

  resultsBox.innerHTML = `<ul>${content.join('')}</ul>`;
}

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

一些小建议 #

• 确保data-lang属性的值和keywordMap里的键完全匹配，不然会找不到对应语言的关键词哦
• 如果需要新增语言，只需要在keywordMap里添加新的键值对，再新增对应的切换按钮就可以了，扩展性很强
• 可以给语言按钮加个active类的样式，比如改变背景色，让用户清楚知道当前选中的语言

这样调整之后，你的搜索栏就能跟着语言切换按钮自动更新补全关键词啦，试试吧😉

备注：内容来源于stack exchange，提问作者Pascal