html - 通过 Bootstrap 在导航栏搜索中使用输入而不是表单

Question

我的 navbar 中有此代码通过 bootstrap4。

<form class="form-inline my-2 my-lg-0" id="search">
      <input class="form-control form-control-sm mr-sm-2" name="search" type="search" placeholder="Search" aria-label="Search">
      <button onclick="clickSearch()" class="btn btn-sm btn-outline-success my-2 my-sm-0">Search</button>
</form>

这段代码没问题，但我要的不是submit只需调用 clickSearch()

所以一开始，我删除了<form>标记，但如果是这样，则布局已损坏。

我正在考虑两种解决方案。

1. 如何不破坏布局 form标签
2. 以某种方式取消表单提交。(可能是解决方法？)

请大家帮我出出主意。

Answer 1

您可以用 div 替换您的表单或按如下方式执行此操作。

$( "button" ).click(function( event ) {
  event.preventDefault();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <form class="form-inline my-2 my-lg-0" id="search">
      <input class="form-control form-control-sm mr-sm-2" name="search" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-sm btn-outline-success my-2 my-sm-0">Search</button>
</form>