如何实现预设关键词映射链接的HTML/JS静态搜索框 无需接入搜索引擎

无需引入第三方库，直接基于你现有的表单结构改造即可，核心逻辑是用JS维护预设的关键词映射表，匹配后自动去重相同链接，完全适配你的需求。

1. 首先调整现有HTML结构 #

给输入框增加id方便选择绑定事件，其他结构保持不变：

<form action="#" class="header__search">
    <!-- 新增id="searchInput" -->
    <input type="text" id="searchInput" placeholder="Search">
    <button type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.71,20.29,18,16.61A9,9,0,1,0,16.61,18l3.68,3.68a1,1,0,0,0,1.42,0A1,1,0,0,0,21.71,20.29ZM11,18a7,7,0,1,1,7-7A7,7,0,0,1,11,18Z"/></svg></button>
    <button type="button" class="close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.41,12l6.3-6.29a1,1,0,1,0-1.42-1.42L12,10.59,5.71,4.29A1,1,0,0,0,4.29,5.71L10.59,12l-6.3,6.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L12,13.41l6.29,6.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Z"/></svg></button>
</form>

2. 新增搜索结果相关样式 #

插入到你的样式文件中即可，控制下拉结果的显示效果：

/* 给搜索表单加相对定位，方便下拉结果定位 */
.header__search {
  position: relative;
}
/* 搜索结果下拉框 */
.search-result {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
  max-height: 200px;
  overflow-y: auto;
  display: none;
  z-index: 999;
}
.search-result li {
  padding: 8px 12px;
  cursor: pointer;
}
.search-result li:hover {
  background: #f5f5f5;
}

3. 新增搜索逻辑JS代码 #

// 1. 预设关键词映射：按链接分组维护，避免重复写链接，新增内容直接修改这里即可
const searchMap = {
  "http://website.com/fruits.html": ["apple", "banana", "strawberry"],
  // 示例后续新增配置
  // "http://website.com/vegetables.html": ["tomato", "potato", "cabbage"]
}

// 2. 初始化拍平成关键词-链接映射表，方便匹配
const keywordMap = {}
const urlTextMap = {} // 存储链接对应的展示名，可自行配置
Object.entries(searchMap).forEach(([url, keywords]) => {
  // 这里可以自定义链接显示文本，默认取路径最后一段
  urlTextMap[url] = urlTextMap[url] || url.split('/').pop().replace('.html', '')
  keywords.forEach(keyword => {
    keywordMap[keyword.toLowerCase()] = url
  })
})

// 3. 绑定DOM元素
const searchInput = document.getElementById('searchInput')
const searchForm = document.querySelector('.header__search')
const searchBtn = searchForm.querySelector('button:not(.close)')
const closeBtn = searchForm.querySelector('.close')
// 插入结果容器
const resultList = document.createElement('ul')
resultList.className = 'search-result'
searchForm.appendChild(resultList)

// 4. 监听输入事件，实时匹配
searchInput.addEventListener('input', function() {
  const inputVal = this.value.trim().toLowerCase()
  resultList.innerHTML = ''
  resultList.style.display = 'none'
  if (!inputVal) return

  // 匹配关键词，自动去重相同链接
  const matchedUrls = new Set()
  Object.entries(keywordMap).forEach(([keyword, url]) => {
    // 匹配规则可改：需要精确匹配就换成 keyword === inputVal
    if (keyword.includes(inputVal)) matchedUrls.add(url)
  })

  // 渲染匹配结果
  if (matchedUrls.size > 0) {
    matchedUrls.forEach(url => {
      const li = document.createElement('li')
      li.textContent = urlTextMap[url]
      li.addEventListener('click', () => window.location.href = url)
      resultList.appendChild(li)
    })
    resultList.style.display = 'block'
  }
})

// 5. 点击搜索按钮触发跳转
searchBtn.addEventListener('click', () => {
  const inputVal = searchInput.value.trim().toLowerCase()
  if (inputVal && keywordMap[inputVal]) window.location.href = keywordMap[inputVal]
})

// 6. 回车触发搜索
searchInput.addEventListener('keydown', e => {
  if (e.key === 'Enter') {
    e.preventDefault()
    const inputVal = searchInput.value.trim().toLowerCase()
    if (inputVal && keywordMap[inputVal]) window.location.href = keywordMap[inputVal]
  }
})

// 7. 关闭按钮清空内容
closeBtn.addEventListener('click', () => {
  searchInput.value = ''
  resultList.innerHTML = ''
  resultList.style.display = 'none'
})

// 8. 点击页面其他区域隐藏结果列表
document.addEventListener('click', e => {
  if (!searchForm.contains(e.target)) resultList.style.display = 'none'
})

4. 自定义调整说明 #

• 匹配规则可自行切换模糊匹配/精确匹配，修改对应判断条件即可
• 结果展示文本可在urlTextMap中自定义配置，不用默认读取路径
• 后续新增关键词和链接仅需修改最开头的searchMap配置即可，无需改动其他逻辑

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