本文介绍如何通过 javascript 在页面加载时自动执行搜索逻辑，确保 `quote-text` 表单默认隐藏，并仅当数据库中不存在匹配的实体名称时才显示，解决初始状态与交互状态不一致的问题。
要实现“页面加载时仅显示 entity-name 输入框，而 quote-form 默认隐藏”，关键在于：不仅响应用户输入（onkeyup），还需在 DOM 完全就绪后立即执行一次初始化检查。当前代码中 searchEntities() 仅由用户输入触发，因此页面首次加载时 #quote-form 仍保持 HTML 中的原始显示状态（默认为 block），导致不符合预期。
✅ 正确做法：页面加载后自动触发一次搜索
只需在脚本末尾添加 window.onload 或更现代的 DOMContentLoaded 事件监听器，确保 DOM 加载完成后再调用 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 = 'none';
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 更安全
searchResults.appendChild(p);
});
}
})
.catch(error => {
console.error('Search failed:', error);
quoteForm.style.display = 'none'; // 出错时保守隐藏
});
}
// ✅ 页面加载完成后立即执行一次搜索（初始化状态）
document.addEventListener('DOMContentLoaded', () => {
searchEntities();
});
</script>? 注意事项与优化建议
- 防止 XSS：使用 textContent 替代 innerHTML 渲染实体名，避免潜在脚本注入。
- URL 编码：对 entityName 使用 encodeURIComponent()，确保特殊字符（如空格、&）正确传递。
- 空值处理：添加 .trim() 和空值判断，避免用户未输入时误触发搜索。
- 错误容错：加入 fetch 错误处理，防止 API 异常导致逻辑中断。
- 性能考虑：若需防抖（避免频繁请求），可在 onkeyup 中添加 setTimeout + clearTimeout 机制，但初始化调用无需防抖。
这样，页面首次加载即根据 entity-name 的当前值（通常为空）自动判断是否显示 quote-form，后续用户输入则实时响应，真正实现“所见即所得”的表单状态控制。
