本文介绍如何通过 javascript 在页面初始化时正确触发实体搜索逻辑，使 `quote-text` 表单仅在无匹配实体时显示，避免首次加载时误显。
要解决表单字段在页面加载时未按预期隐藏的问题，关键在于：页面首次渲染时，searchEntities() 函数尚未执行，因此 #quote-form 的显示状态仍为默认的 block（或浏览器默认值），导致 quote-text 区域意外可见。 仅依赖用户输入触发 onkeyup 是不够的——必须在 DOM 完全就绪后，立即以空值（或初始值）调用一次搜索逻辑，模拟“页面加载即校验”的行为。
最直接可靠的方案是利用 window.onload 或更现代的 DOMContentLoaded 事件，在页面资源加载完毕后主动触发一次 searchEntities()：
<script>
function searchEntities() {
const entityName = document.querySelector('#entity-name').value.trim();
const quoteForm = document.querySelector('#quote-form');
const searchResults = document.querySelector('#search_results');
// 清空上次结果
searchResults.innerHTML = '';
// 若输入为空，可选择不发起请求，或按业务逻辑处理（如视为“未指定实体”）
if (!entityName) {
quoteForm.style.display = 'block'; // 无输入时显示 quote 表单（常见需求）
return;
}
fetch(`/search-entities/?entity_name=${encodeURIComponent(entityName)}`)
.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 = 'block'; // 出错时安全降级：显示表单
});
}
// ✅ 页面加载完成后立即执行一次搜索（使用 DOMContentLoaded 更精准）
document.addEventListener('DOMContentLoaded', () => {
searchEntities(); // 初始校验：此时 input 值为空，将按逻辑决定是否显示 quote-form
});
</script>⚠️ 注意事项与优化建议：
- 不要使用 window.onload 替代 DOMContentLoaded：前者需等待图片、样式表等所有资源加载完成，延迟更高；后者仅等待 HTML 解析完毕，更及时。
- 对空输入做明确处理：如示例中 trim() 和 !entityName 判断，避免因空格导致误判；业务上常规定“空输入 = 无实体匹配”，故直接显示 #quote-form。
- 添加错误处理：网络失败或接口异常时，应降级显示表单并提示用户，而非留白。
- 防御性编码：使用 textContent 而非 innerHTML 渲染实体名，防止潜在 XSS；URL 参数使用 encodeURIComponent 编码。
- CSS 初始化推荐：可在 HTML 中为 #quote-form 添加内联样式 <form id="quote-form" style="display: none;">，实现“无 JS 时也默认隐藏”的渐进增强效果。
通过上述改造，页面加载瞬间即可根据初始状态（通常为空）准确控制表单可见性，彻底解决“仅切换时生效、首屏失效”的问题。
