本文介绍如何通过 javascript 在页面加载完成时自动触发实体搜索逻辑，从而根据数据库查询结果动态控制表单字段（如 quote-text）的初始显示状态，避免其在未执行搜索前意外显示。
要解决“quote-text 字段在页面首次加载时错误显示”的问题，关键在于：页面加载时需立即执行一次 searchEntities()，而非仅依赖用户输入触发。当前代码中，searchEntities() 仅绑定在 onkeyup 事件上，导致页面初始渲染后 #quote-form 仍为默认可见状态（HTML 中未设置 style="display:none"），而逻辑判断（if (entities.length === 0)）尚未运行。
✅ 正确做法是：利用 window.onload 或更现代的 DOMContentLoaded 事件，在 DOM 完全就绪后主动调用一次搜索函数，使其按规则初始化表单可见性。
以下是优化后的完整脚本（含健壮性增强）：
<script>
function searchEntities() {
const entityInput = document.querySelector('#entity-name');
const quoteForm = document.querySelector('#quote-form');
const searchResults = document.querySelector('#search_results');
// 清空上次结果
searchResults.innerHTML = '';
// 若输入为空，可选择不发起请求或清空结果并隐藏表单
if (!entityInput.value.trim()) {
quoteForm.style.display = 'none';
return;
}
fetch(`/search-entities/?entity_name=${encodeURIComponent(entityInput.value)}`)
.then(response => {
if (!response.ok) throw new Error('Network response was not ok');
return response.json();
})
.then(entities => {
if (Array.isArray(entities) && entities.length === 0) {
// 数据库无匹配项 → 显示 quote 表单
quoteForm.style.display = 'block';
} else {
// 有匹配项 → 隐藏 quote 表单，显示建议列表
quoteForm.style.display = 'none';
entities.forEach(entity => {
const p = document.createElement('p');
p.textContent = entity.name; // 使用 textContent 防 XSS
searchResults.appendChild(p);
});
}
})
.catch(error => {
console.error('Search failed:', error);
quoteForm.style.display = 'none'; // 出错时保守隐藏
});
}
// ✅ 页面加载完成后立即执行一次搜索（使用 DOMContentLoaded 更精准）
document.addEventListener('DOMContentLoaded', () => {
searchEntities();
});
</script>? 重要注意事项：
- 不要仅依赖 window.onload —— 它需等待所有资源（如图片、样式表）加载完毕，可能延迟执行；DOMContentLoaded 更合适，它在 HTML 解析完成、DOM 构建好后即触发。
- 建议为 #quote-form 添加初始 CSS 隐藏声明（防御性设计）：
<form id="quote-form" style="display: none;">
这样即使 JS 加载失败或阻塞，表单也不会意外暴露。
- 后端 /search-entities/ 接口务必返回标准 JSON 数组（即使为空数组 []），避免前端 entities.length 报错。
- 使用 encodeURIComponent() 对 URL 参数编码，防止特殊字符（如空格、&）破坏请求。
通过以上调整，页面加载时将自动检查 entity-name 输入值（默认为空 → 视为无匹配 → 隐藏表单），后续用户输入实时响应，真正实现“仅当无实体匹配时才显示 quote-text”的业务需求。
