基于switch语句实现点击搜索跳转企业官网功能遇问题求助

问题根源 #

原代码的核心问题在于：

• JavaScript中直接写入HTML的<a>标签不会被执行，JS无法通过这种方式触发页面跳转
• 重复声明变量org，虽不报错但属于冗余代码
• 仅实现了单个企业的匹配逻辑，未覆盖需求中的TCS、Wipro等企业

修正后的完整代码 #

HTML部分（补充下拉提示）

<input type="text" id="org_name" class="form-control border-light" style="padding: 30px 25px;" placeholder="Organisation Name.." list="list01">
<!-- 补充datalist，提供预设企业选项 -->
<datalist id="list01">
  <option value="Deloitte">
  <option value="TCS">
  <option value="Wipro">
</datalist>
<div class="input-group-append">
    <button class="btn btn-secondary px-4 px-lg-5" id="search_org" onclick="organisation()">Search</button>
</div>

JavaScript部分（修复跳转逻辑+完善匹配）

function organisation() {
  // 获取输入值，去除前后空格并转小写，避免大小写匹配问题
  const orgName = document.getElementById("org_name").value.trim().toLowerCase();
  
  switch(orgName) {
    case "deloitte":
      window.open("https://www2.deloitte.com", "_blank");
      break;
    case "tcs":
      window.open("https://www.tcs.com", "_blank");
      break;
    case "wipro":
      window.open("https://www.wipro.com", "_blank");
      break;
    default:
      alert("未查询到该企业的官网链接");
  }
}

关键修正点说明 #

1. 跳转逻辑修复：使用window.open(url, "_blank")实现新窗口打开官网，这是JavaScript中触发外部链接跳转的标准方式
2. 输入兼容处理：通过trim()和toLowerCase()处理输入值，避免用户输入空格、大小写不一致导致的匹配失败
3. 完善匹配分支：补充TCS、Wipro的匹配逻辑，添加default分支处理未匹配的情况，提升用户反馈
4. 体验优化：添加datalist元素，提供预设企业选项，减少用户输入错误

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