引導搜索框，請點擊
[英]Bootstrap search box click
問題描述
我使用Bootstrap 4添加了以下HTML
<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 class="btn btn-default btn-search" onclick="ss()"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
單擊搜索按鈕后，整個頁面都會刷新，我添加了OnClick（）事件並將其綁定到ss（）（一個僅發出警報的自定義函數），但表單仍在刷新。
我需要將搜索按鈕綁定到一些JavaScript函數，這將執行實際的搜索。 如何？
4 個解決方案
解決方案1
1 2018-05-30 12:19:03
function ss(){ alert("hiiiii"); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <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 class="btn btn-default btn-search" onclick="javascript:ss()"><i class="fa fa-search"></i>search</button> </div> </div> </form> </div>
解決方案2
1 2018-05-30 12:37:18
嘗試這個。 您需要在JavaScript函數中添加return false語句，並在函數調用之前添加return。
function ss(){ alert("hiiiii"); return false; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <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 class="btn btn-default btn-search" onclick="return ss();"><i class="fa fa-search"></i>search</button> </div> </div> </form> </div>
如果您想為此使用Jquery，也可能會看到Jquery event.preventDefault（）方法。
解決方案3
1 2018-05-30 12:42:35
她的代碼是它：
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> </style> </head> <body> <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 class="btn btn-default search"onclick="return myFunction()">Click me</button><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> </div> <script> function myFunction() { alert ("hiiiiiiiiiiii"); return false; } </script> </body> </html>
解決方案4
1 2018-05-30 12:53:16
刪除內聯onclick屬性，並在按鈕上使用偵聽器，如下所示：
var btn = document.querySelector('button'); // I would recommend using a unique `id` for the button and targetting that instead
btn.addEventListener('click', ss);
function ss(){
alert('hello');
}
為了防止頁面重新加載，請使用preventDefault而不是上述代碼段的return false ：
var btn = document.querySelector('button'); // I would recommend using a unique `id` for the button and targetting that instead btn.addEventListener('click', ss); function ss(e){ alert('hello'); e.preventDefault(); }
<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 class="btn btn-default btn-search"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form>
jsFiddle： https ://jsfiddle.net/AndrewL64/n7s90pgt/1/
如何在不刷新頁面的情況下清空wenzhixin引導程序表中click事件的搜索框？
[英]how to empty search box on click event in wenzhixin bootstrap table without refresh page?
Bootstrap 5：我需要做什么才能在導航欄中有一個搜索圖標，當我單擊它時，它會在導航欄下方顯示一個搜索框？
[英]Bootstrap 5: What I need to do to have a search icon in navbar that when I click it, it will show a search box under the navbar?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.