Bootstrap搜索框点击后页面刷新，如何绑定自定义JS搜索函数？

你遇到的页面刷新问题，核心原因是表单内的按钮默认会触发提交行为：<button>元素在<form>标签中时，默认type为submit，点击它会自动触发表单提交，导致页面刷新——哪怕你绑定了自定义的ss()函数，这个默认动作也会同时执行。

下面给你几种可行的解决方案，同时帮你绑定实际的搜索逻辑：

方案1：修改按钮类型为button（最简单） #

直接给按钮加上type="button"，彻底取消它的表单提交功能：

<div class="col-sm-3 col-md-3 search-header">
  <form class="navbar-form" role="search">
    <div class="input-group">
      <input type="text" class="form-control search-box " placeholder="Search" name="srch-term" id="srch-term">
      <div class="input-group-btn">
        <!-- 新增type="button" -->
        <button type="button" class="btn btn-default btn-search" onclick="ss()"><i class="glyphicon glyphicon-search"></i></button>
      </div>
    </div>
  </form>
</div>

然后更新你的ss()函数，加入实际搜索逻辑：

function ss() {
  // 获取搜索框输入值
  const searchKeyword = document.getElementById('srch-term').value.trim();
  
  if (!searchKeyword) {
    alert('请输入搜索内容');
    return;
  }
  
  // 这里写你的实际搜索逻辑，比如：
  // 1. 发起AJAX请求到后端接口
  // 2. 处理返回的搜索结果并渲染到页面
  alert(`正在搜索：${searchKeyword}`);
}

方案2：在函数中阻止默认提交行为 #

如果你不想修改按钮类型，可以在ss()函数中阻止事件的默认动作：
首先修改HTML，把事件对象传入函数：

<button class="btn btn-default btn-search" onclick="ss(event)"><i class="glyphicon glyphicon-search"></i></button>

然后更新JS函数：

function ss(event) {
  // 阻止表单默认提交行为
  event.preventDefault();
  
  // 后续搜索逻辑和方案1一致
  const searchKeyword = document.getElementById('srch-term').value.trim();
  if (!searchKeyword) {
    alert('请输入搜索内容');
    return;
  }
  
  // 执行搜索操作
  console.log('搜索关键词：', searchKeyword);
  // 示例：发起fetch请求
  // fetch('/api/search', {
  //   method: 'POST',
  //   headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  //   body: `srch-term=${encodeURIComponent(searchKeyword)}`
  // })
  // .then(res => res.json())
  // .then(data => {
  //   // 渲染搜索结果
  //   console.log('搜索结果：', data);
  // });
}

方案3：使用事件监听（更推荐的现代写法） #

这种方式把HTML和JS代码分离，更易维护，也避免了inline事件绑定的问题：
首先修改HTML，给按钮加个ID：

<div class="col-sm-3 col-md-3 search-header">
  <form class="navbar-form" role="search">
    <div class="input-group">
      <input type="text" class="form-control search-box " placeholder="Search" name="srch-term" id="srch-term">
      <div class="input-group-btn">
        <button id="searchBtn" class="btn btn-default btn-search"><i class="glyphicon glyphicon-search"></i></button>
      </div>
    </div>
  </form>
</div>

然后在JS文件中绑定事件：

// 等待DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const searchBtn = document.getElementById('searchBtn');
  searchBtn.addEventListener('click', function(event) {
    // 阻止默认提交
    event.preventDefault();
    
    // 获取搜索关键词
    const searchKeyword = document.getElementById('srch-term').value.trim();
    if (!searchKeyword) {
      alert('请输入搜索内容');
      return;
    }
    
    // 执行实际搜索逻辑
    console.log('开始搜索：', searchKeyword);
    // 这里可以替换成你的业务代码
  });
});

额外技巧：阻止整个表单的提交 #

如果你的表单完全不需要传统的页面跳转提交，也可以给<form>标签添加onsubmit="return false"，彻底禁用表单的默认提交行为：

<form class="navbar-form" role="search" onsubmit="return false">

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