默认情况下，html表单在按下回车键时会触发表单提交并刷新页面；要实现“按回车即搜索”，必须阻止表单默认提交行为，并通过javascript接管搜索逻辑。
默认情况下，html表单在按下回车键时会触发表单提交并刷新页面；要实现“按回车即搜索”，必须阻止表单默认提交行为，并通过javascript接管搜索逻辑。
HTML 中的 <form> 元素具有内置的提交机制：当用户在文本输入框中按下 Enter 键，浏览器会自动触发表单提交（即使没有显式点击按钮），导致页面刷新或跳转到 action 指定的 URL（若未设置则为当前页）。你当前的代码缺少 id 标识、submit 事件监听器及阻止默认行为的关键步骤，因此搜索无法生效。
✅ 正确做法如下：
1. 为表单添加唯一 ID 并明确声明提交方式
<form id="searchForm" method="GET"> <input type="text" name="search" placeholder="Search Content..." autofocus> </form>
✅ id="searchForm" 是 JavaScript 绑定事件的前提；method="GET" 符合搜索语义（可选，但推荐）；autofocus 提升用户体验。
立即学习“前端免费学习笔记（深入）”；
2. 使用 JavaScript 拦截提交并执行自定义搜索逻辑
document.getElementById('searchForm').addEventListener('submit', function(event) {
event.preventDefault(); // 关键：阻止页面刷新/跳转
const query = this.elements.search.value.trim();
if (!query) return; // 忽略空搜索
console.log('Executing search for:', query);
// 示例：调用搜索函数（如 AJAX 请求、路由跳转或 DOM 过滤）
// performSearch(query);
});⚠️ 注意事项：
- 不要遗漏 event.preventDefault() —— 这是防止刷新的核心；
- 确保脚本在 DOM 加载完成后执行（推荐将 <script> 放在 </body> 前，或使用 DOMContentLoaded）；
- 若后续需真实提交（如跳转到搜索结果页），可保留 action 属性（如 action="/search"），此时无需 preventDefault()，但需确保后端能正确处理 GET 参数；
- CSS 中 background-image: 'searchicon.png' 语法错误，应改为 url('searchicon.png')，且建议配合 background-size 和伪元素优化图标显示。
? 总结：表单回车搜索的本质是「拦截原生提交 → 执行 JS 逻辑」。掌握 event.preventDefault() 与 form.submit 事件的配合，是构建现代交互式搜索功能的基础。
