如何用JavaScript实现搜索栏自动大小写校正功能？

核心思路 #

要解决大小写敏感和多关键词匹配的问题，我们可以通过两点优化实现需求：

• 统一输入与目标名称的大小写格式，消除大小写差异
• 用名称-页面映射表管理所有可匹配的关键词/名称，方便扩展多变体

修改后的代码 #

HTML（保留原有结构，无需改动）

<form action="" style="margin-bottom: 40px;">
  <div class="input-group">
    <input type="search" id="search" autocomplete="off" onchange="openPage()" class="form-control rounded-pill rounded-end-0 border-0 ps-4" placeholder="Search Celebrity Bones...">
    <button type="button" id="button" onclick="openPage()" value="Chercher" class="btn btn-primary rounded-pill rounded-start-0 shadow-none">
      <i class="fa fa-search"></i>
    </button>
  </div>
</form>

JavaScript（优化匹配逻辑+自动校正）

// 管理所有可匹配的名称/关键词与对应页面的映射
const namePageMap = {
  "jane doe": "files/Janedow.html",
  // 可添加更多变体/关键词，比如：
  // "jane": "files/Janedow.html",
  // "doe": "files/Janedow.html"
};

function openPage() {
  const searchInput = document.getElementById("search").value.trim();
  if (!searchInput) return; // 空输入不执行操作

  // 将输入转为小写，消除大小写差异
  const lowerInput = searchInput.toLowerCase();
  
  // 查找对应的目标页面
  let targetPage = null;
  for (const [nameKey, pageUrl] of Object.entries(namePageMap)) {
    // 两种匹配模式可选：
    // 1. 精确匹配（输入与名称完全一致，不区分大小写）
    if (nameKey.toLowerCase() === lowerInput) {
      targetPage = pageUrl;
      break;
    }
    // 2. 关键词包含匹配（输入包含关键词即触发）
    // if (lowerInput.includes(nameKey.toLowerCase())) {
    //   targetPage = pageUrl;
    //   break;
    // }
  }

  if (targetPage) {
    window.open(targetPage);
    // 自动将输入框内容校正为首字母大写格式
    document.getElementById("search").value = toTitleCase(searchInput);
  } else {
    alert("未找到相关名人内容");
  }
}

// 辅助函数：将字符串转为首字母大写格式
function toTitleCase(str) {
  return str.toLowerCase().split(' ')
    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
    .join(' ');
}

关键优化点说明 #

1. 不区分大小写匹配：通过toLowerCase()将输入和映射表中的名称统一转为小写比较，彻底解决大小写敏感问题
2. 映射表管理：用namePageMap存储所有可匹配的关键词和对应页面，新增名称/变体只需添加键值对，无需修改判断逻辑
3. 自动校正显示：toTitleCase函数将输入内容转为首字母大写格式，实现用户输入"jane doe"后，输入框自动显示"Jane Doe"的效果
4. 灵活匹配模式：提供精确匹配和关键词包含匹配两种选项，可根据需求切换

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