如何实现点击搜索按钮在新标签页打开第三方站点搜索结果

你之前写的表单不生效，核心是三个配置错误：

• action属性里提前硬写了?searchTerm，GET方法的表单提交时，会自动把所有带name属性的表单项，以键=值的格式拼接到action指定的URL后面，你提前写参数名会导致最终拼接的URL变成website.com/?searchTerm?searchTerm=实际输入内容，参数结构完全错乱，第三方站点自然识别不到搜索词。
• 没有配置新标签页打开的属性，默认会在当前页跳转，不符合交互要求。
• 写的action地址没加HTTP/HTTPS协议头，浏览器会把它识别为当前站点下的相对路径，根本跳不到第三方站点。

不需要写任何JavaScript，靠原生表单属性就能实现所有需求，代码如下：

<!-- 
  注意点：
  1. action填第三方搜索站点的完整基础地址，带协议头，不要提前拼参数
  2. target="_blank" 实现新标签页打开
  3. input的name属性值必须和第三方站点搜索接口接收的参数名完全一致，比如对方用q当参数名就把name改成q
-->
<form method="get" action="https://第三方搜索站点完整地址/" target="_blank">
  <input type="text" name="searchTerm" placeholder="请输入搜索内容" required>
  <button type="submit">搜索</button>
</form>

提交时浏览器会自动把用户输入的内容编码后拼接到URL里，点击按钮、输入框内按回车都会自动触发跳转，完全符合交互要求。

你想的手动替换URL里参数的思路是可行的，但a标签需要用户主动点击，没法直接响应回车事件，更推荐用少量JS实现，适合需要加自定义逻辑（比如搜索词校验、搜索记录埋点）的场景，代码如下：

<div class="search-wrapper">
  <input type="text" id="searchInput" placeholder="请输入搜索内容">
  <button id="searchSubmit">搜索</button>
</div>

<script>
// 第三方搜索地址前缀，替换成实际地址即可
const SEARCH_PATH = 'https://第三方搜索站点完整地址/?searchTerm='
const inputEl = document.getElementById('searchInput')
const submitEl = document.getElementById('searchSubmit')

function handleSearch() {
  const keyword = inputEl.value.trim()
  if (!keyword) return
  // 对搜索词做URL编码，避免中文、特殊符号导致参数解析错误
  const targetUrl = SEARCH_PATH + encodeURIComponent(keyword)
  // 新标签页打开结果页
  window.open(targetUrl, '_blank')
}

// 绑定按钮点击事件
submitEl.addEventListener('click', handleSearch)
// 绑定输入框回车事件
inputEl.addEventListener('keydown', e => {
  if (e.key === 'Enter') handleSearch()
})
</script>

• 所有第三方地址必须写完整带协议头的绝对路径，开头必须带https://或http://，否则浏览器会按相对路径解析，跳转到自己站点下的错误地址。
• 如果第三方站点设置了跨域跳转拦截，属于对方的安全策略限制，前端没有直接绕过的方案，需要使用对方公开开放的搜索接入方式。

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