如何修改搜索框逻辑，实现选择后切换显示下方信息div

核心思路 #

抛弃原CodeNepal代码里的webLink跳转逻辑，改为通过DOM元素的显示/隐藏来切换对应地区的自定义内容；手动创建64个地区的内容容器，通过唯一ID与搜索结果绑定。

1. HTML结构实现 #

<!-- 搜索框容器 -->
<div class="search-container">
  <input type="text" id="region-search" placeholder="输入美国州/加拿大省/地区名称">
  <button id="search-btn"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg></button>
  <!-- 搜索建议下拉列表 -->
  <ul id="suggestions-list"></ul>
</div>

<!-- 自定义内容区域 -->
<div class="region-content">
  <!-- 示例：阿拉巴马州 -->
  <div id="region-alabama" class="content-item" style="display: none;">
    <h3>阿拉巴马州</h3>
    <p>自定义内容：这里是阿拉巴马州的专属信息...</p>
  </div>
  <!-- 示例：不列颠哥伦比亚省 -->
  <div id="region-british-columbia" class="content-item" style="display: none;">
    <h3>不列颠哥伦比亚省</h3>
    <p>自定义内容：这里是不列颠哥伦比亚省的专属信息...</p>
  </div>
  <!-- 剩余62个地区的div按此格式添加，ID统一为 region-地区英文小写（空格替换为连字符） -->
</div>

2. JavaScript逻辑修改 #

替换原CodeNepal代码中处理点击搜索结果或搜索按钮的webLink跳转逻辑，改为以下代码：

// 完整64个地区的数据源，需补充剩余条目
const regions = [
  { name: "Alabama", id: "alabama" },
  { name: "British Columbia", id: "british-columbia" },
  // 剩余62个地区按此格式添加，name为显示名称，id与对应div的ID后缀一致
];

const searchInput = document.getElementById('region-search');
const suggestionsList = document.getElementById('suggestions-list');
const searchBtn = document.getElementById('search-btn');
const contentItems = document.querySelectorAll('.content-item');

// 搜索提示生成逻辑（保留原下拉提示，仅修改点击事件）
searchInput.addEventListener('input', function() {
  const inputVal = this.value.toLowerCase();
  suggestionsList.innerHTML = '';
  if(inputVal.length > 0) {
    const filteredRegions = regions.filter(region => region.name.toLowerCase().includes(inputVal));
    filteredRegions.forEach(region => {
      const li = document.createElement('li');
      li.textContent = region.name;
      // 点击提示项时切换显示对应内容
      li.addEventListener('click', function() {
        searchInput.value = region.name;
        suggestionsList.innerHTML = '';
        showRegionContent(region.id);
      });
      suggestionsList.appendChild(li);
    });
  }
});

// 点击搜索按钮时匹配并显示内容
searchBtn.addEventListener('click', function() {
  const inputVal = searchInput.value.toLowerCase();
  const matchedRegion = regions.find(region => region.name.toLowerCase() === inputVal);
  if(matchedRegion) {
    showRegionContent(matchedRegion.id);
  } else {
    alert('未找到该地区，请检查输入');
  }
});

// 核心函数：显示指定地区内容，隐藏其他
function showRegionContent(regionId) {
  contentItems.forEach(item => {
    item.style.display = 'none';
  });
  const targetContent = document.getElementById(`region-${regionId}`);
  if(targetContent) {
    targetContent.style.display = 'block';
  }
}

// 点击页面空白处关闭下拉提示
document.addEventListener('click', function(e) {
  if(!e.target.closest('.search-container')) {
    suggestionsList.innerHTML = '';
  }
});

3. 基础CSS美化（可选） #

.search-container {
  position: relative;
  max-width: 400px;
  margin: 20px auto;
}
#region-search {
  width: 100%;
  padding: 10px 40px 10px 15px;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 16px;
}
#search-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  cursor: pointer;
  color: #666;
}
#suggestions-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: white;
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
}
#suggestions-list li {
  padding: 10px 15px;
  cursor: pointer;
}
#suggestions-list li:hover {
  background: #f5f5f5;
}
.region-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}
.content-item h3 {
  color: #2d3748;
  margin-top: 0;
}

修改说明 #

1. 完全移除原代码中涉及webLink的跳转逻辑，替换为showRegionContent函数处理DOM显示/隐藏
2. 每个地区的自定义内容需手动创建div，ID严格遵循region-地区英文小写（空格用连字符替换）规则，与regions数组中的id字段一一对应
3. 确保regions数组包含完整的64个美国州、加拿大省及地区的名称和对应ID

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