电商项目搜索功能问题：获取输入值并拆分+页面跳转异常求助

核心问题 #

1. 事件绑定错误：你给输入框绑的是focus事件，这事件是输入框刚获得焦点时触发的，这时候用户还没输入内容或者输入的不是最终提交的内容，自然打不出正确结果。而且表单默认提交会直接跳转页面，之前页面的控制台日志会被清空。
2. split逻辑不符需求：你说要按逗号分隔关键词，但代码里写的是split(" ")（按空格分割），这也和你的需求不匹配。
3. 跳转时未传递参数：直接用表单默认跳转，没有把输入的关键词带到search.html里，导致新页面拿不到数据。

修正步骤 #

1. 修正index.html的JS代码，监听表单提交事件并传递参数

把原来的focus事件改成监听表单的submit事件，先获取输入内容，处理关键词，再手动跳转并把参数拼到URL上，同时阻止表单默认提交行为：

// 先获取表单元素
const searchForm = document.querySelector('form');
searchForm.addEventListener('submit', function(e) {
  // 阻止表单默认提交跳转
  e.preventDefault();
  // 获取输入框内容
  const searchInput = document.getElementById("search-query");
  const searchValue = searchInput.value.trim();
  if (!searchValue) return; // 空内容不处理
  
  // 按逗号分割关键词，同时去掉每个关键词前后的空格
  const searchResults = searchValue.split(',').map(item => item.trim());
  console.log(searchResults); // 这里能在index.html控制台看到结果
  
  // 手动跳转到search.html，把关键词作为查询参数传递
  window.location.href = `search.html?q=${encodeURIComponent(searchValue)}`;
});

2. 在search.html中获取并处理参数

在search.html的JS里，读取URL上的查询参数，处理后打印：

// 获取URL查询参数
const urlParams = new URLSearchParams(window.location.search);
const searchQuery = urlParams.get('q');
if (searchQuery) {
  const searchResults = searchQuery.split(',').map(item => item.trim());
  console.log(searchResults); // 这里在search.html控制台能看到分割后的关键词
}

3. 可选：优化表单的输入体验

可以给输入框加个提交按钮，保持回车提交的同时也支持点击提交，表单结构可以改成：

<form action="search.html">
  <input
    type="text"
    placeholder="Search for products"
    id="search-query"
  />
  <button type="submit">搜索</button>
</form>

这样修改后，不管是回车还是点击按钮提交，都能正确获取输入内容，分割关键词，跳转到search.html的同时传递数据，并且两个页面的控制台都能打印出处理后的关键词数组。

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