下面是开发中用bootstrap制作的一个搜索框，以及给搜索框添加回车搜索事件的一个小案例。

　　

　　bootstrap制作搜索框及添加回车搜索事件

　　　　下面是功能实现的代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>bootstrap制作搜索框及添加回车搜索事件</title>
 6         
 7         <link rel="stylesheet" type="text/css" href="../trd/bootstrap/css/bootstrap.min.css"/>
 8         
 9         <script type="text/javascript" src="../trd/jquery/jquery-1.11.2.js"></script>
10         <script type="text/javascript" src="../trd/bootstrap/js/bootstrap.min.js"></script>
11         
12     </head>
13     <body>
14         <div class="col-sm-4">
15             <div class="input-group">
16                 <input type="text" class="form-control" onkeydown="onKeyDown(event)"/>
17                 <span class="input-group-addon""><i class="glyphicon glyphicon-search"></i></span>
18             </div>
19         <div class="col-sm-4">
20             
21             
22         <script type="text/javascript">
23             function onKeyDown(event){
24                 var e = event || window.event || arguments.callee.caller.arguments[0];
25                 if(e && e.keyCode==27){ // 按 Esc 
26                     //要做的事情
27                 }
28                 if(e && e.keyCode==113){ // 按 F2 
29                      //要做的事情
30                 }            
31                 if(e && e.keyCode==13){ // enter 键
32                      alert("此处回车触发搜索事件");
33                 }
34                 
35             }
36         
37         </script>        
38     </body>
39 </html>

　　在上面的代码中有几点需要注意的：

　　1、由于bootstrap依赖于jquery,所以在引入bootstrap.min.js之前要先引入jquery.js

　　2、bootstap.min.css也是需要引入的