在Codex中实现前端搜索需分三种方式：GET请求用URLSearchParams拼接参数并配置cors；表单提交须preventDefault后用FormData提取数据；复杂条件用POST发送JSON，且必须设置Content-Type为application/json。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在Codex中实现前端搜索条件传递给后端查询，需确保表单数据能被正确序列化并触发指定接口请求，不能依赖默认提交行为或遗漏请求头配置。
构造带参数的GET请求
在搜索框绑定回车或按钮点击事件，用URLSearchParams拼接查询字符串，再通过fetch发起GET请求。
第一步：获取输入框值，过滤空格和空字符串，避免传入无效参数 → const keyword = input.value.trim();
第二步：创建URLSearchParams实例，append非空字段，如category、status等筛选项 → const params = new URLSearchParams(); params.append('q', keyword); if (categorySelect.value) params.append('category', categorySelect.value);
第三步：拼接完整URL，调用fetch时设置mode: 'cors'，否则跨域请求会被浏览器拦截 → fetch(`/api/search?${params.toString()}`, { method: 'GET', headers: { 'Content-Type': 'application/json' } });
使用表单自动提交并拦截处理
如果已有传统form标签，可保留语义结构，但必须阻止默认提交，手动提取数据。
给form添加id="searchForm"，监听submit事件 → document.getElementById('searchForm').addEventListener('submit', handleSearch);
依托用户知识库、工作记录、项目文件、会议纪要、表格、图片、文稿及评审材料生成高质量职场汇报演示文稿。适用于试用期考核、转正述职、晋升答辩、年度总结、项目进度汇报、项目评审、方案说服、资源申请、部门规划、业务优化或管理决策类 PPT 制作；Codex 需先明确汇报目标、提取佐证材料、生成规范说明书、适配汇报时长、搭建内容大纲、设计每页幻灯片内容，最后生成附带讲稿与佐证材料核对清单的 PPTX 文件。
在handleSearch函数中调用event.preventDefault()，否则页面会跳转或刷新 → 这一步漏掉会导致整个页面重载，搜索结果无法动态渲染。
用new FormData(form)读取所有字段，遍历后过滤空值，再转为对象传给fetch → const data = Object.fromEntries([...new FormData(form)].filter(([_, v]) => v));
发送结构化POST请求（推荐用于复杂条件）
当搜索条件包含数组、嵌套对象或大量字段时，应改用POST方法，以JSON格式提交。
方法一：手动构建请求体对象 → const payload = { q: input.value, filters: { price_range: [minPrice, maxPrice], tags: selectedTags }, page: 1 };
方法二：直接将表单元素映射为结构化数据 → const filters = {}; document.querySelectorAll('[name^="filter-"]').forEach(el => { const key = el.name.replace('filter-', ''); filters[key] = el.type === 'checkbox' ? el.checked : el.value; });
【必须设置headers中的Content-Type为application/json】，否则后端Node.js/Express等框架无法解析req.body。
执行fetch('/api/search', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
