需先引入codex资源，再用cdx-text-input标签创建搜索框；静态建议通过suggestions属性设置，动态建议须调用setsuggestions()方法；需监听keydown拦截回车、suggestion-select处理选项点击。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要在Codex中快速实现带搜索建议的搜索框，需先确认项目已正确引入Codex核心CSS和JS资源，否则输入框无法渲染为Codex样式，下拉建议列表也不会自动出现。
添加基础搜索框组件
在HTML中插入Codex标准搜索输入框标签，使用cdx-text-input并设置type="search"属性：<cdx-text-input type="search" placeholder="搜索..."></cdx-text-input>
这一步必须放在内且确保页面已加载Codex的Web Component定义脚本，否则元素会退化为普通<input>，失去所有交互能力。
启用搜索建议下拉列表
方法一：绑定静态建议数组
给cdx-text-input添加suggestions属性，值为JSON格式字符串，例如：suggestions='["前端开发", "CSS变量", "响应式布局", "Codex文档"]'。
方法二：动态加载建议（推荐）
监听input事件，在用户输入≥2个字符后调用API获取匹配项，再调用组件实例的setSuggestions()方法更新下拉内容。注意：直接修改suggestions属性不会触发重绘，必须走实例方法。
通过本地 Codex 或 OpenClaw OAuth 凭证直接调用 ChatGPT/Codex Responses 的 image_generation 工具来生成或编辑光栅图像，然后保存
【必须调用组件实例方法而非仅改属性】若只在HTML里写死suggestions又未配合JavaScript初始化，下拉菜单将始终为空。
自定义搜索建议行为
第一步：获取组件引用const searchInput = document.querySelector('cdx-text-input');
第二步：拦截回车提交并阻止默认搜索跳转searchInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); doSearch(e.target.value); } });
第三步：点击建议项时填充输入框并触发搜索
通过searchInput.addEventListener('suggestion-select', (e) => { searchInput.value = e.detail.suggestion; doSearch(e.detail.suggestion); });
这一步操作起来很简单，直接把事件监听器挂上去就行，但漏掉e.preventDefault()会导致页面意外刷新，务必检查。
