网页加载时自动执行搜索并展示数据，无需点击提交按钮

我来帮你搞定这两个需求——页面一加载就自动执行搜索，还有输入内容时不用点按钮自动展示结果，直接看下面的方案和完整代码：

核心实现思路 #

1. 页面加载自动触发搜索：用浏览器的DOMContentLoaded事件，等页面HTML结构加载完成后，直接调用你的search()函数，不用用户手动操作。
2. 实时输入自动展示数据：给搜索输入框绑定input事件，用户每输入/删除一个字符，就自动触发一次搜索逻辑。

修改后的完整代码 #

<form id="search-form" name="search-form" onsubmit="return search()">
  <div>
    <div class="input-holder">
      <input type="text" id="query" value="test" class="search-input"/>
      <button class="search-icon" onclick="searchToggle(this, event);"><span>search</span></button>
    </div>
    <span class="close" onclick="searchToggle(this, event);">close</span>
  </div>
</form>

<script>
// 页面加载完成后自动触发搜索
document.addEventListener('DOMContentLoaded', function() {
  search();
});

// 监听输入框变化，实时触发搜索
document.getElementById('query').addEventListener('input', function() {
  search();
});

// 你的搜索逻辑函数（这里假设你已有这个函数，示例逻辑供参考）
function search() {
  const query = document.getElementById('query').value.trim();
  // 这里写你的搜索请求逻辑，比如发送AJAX请求获取数据并展示
  console.log('正在搜索：', query);
  // 阻止表单默认提交行为（如果需要的话）
  return false;
}

// 搜索框的展开/收起逻辑（补全你截断的代码）
function searchToggle(element, event) {
  event.preventDefault();
  document.getElementById('search-form').classList.toggle('active');
  // 可以在这里添加展开后自动聚焦输入框的逻辑
  if (document.getElementById('search-form').classList.contains('active')) {
    document.getElementById('query').focus();
  }
}
</script>

关键细节说明 #

• DOMContentLoaded事件比window.onload更高效，它不会等待图片等资源加载完成，只要HTML结构就绪就会触发，适合我们的自动搜索需求。
• input事件覆盖了所有输入场景：键盘输入、粘贴内容、删除字符，比keyup更全面（比如用户用鼠标右键粘贴内容时，keyup不会触发，但input会）。
• 保留了原表单的onsubmit和按钮点击逻辑，兼容用户手动点击搜索按钮或按回车的场景，不会破坏原有交互。

内容的提问来源于stack exchange，提问作者doctiroz