在输入中按下 ENTER 键时打开 Bootstrap 下拉菜单答案

【问题标题】：Open Bootstrap dropdown when ENTER key is pressed in input在输入中按下 ENTER 键时打开 Bootstrap 下拉菜单
【发布时间】：2016-07-20 18:57:22
【问题描述】：

我想在输入中按下 ENTER 键时打开 Bootstrap 下拉菜单。

HTML：

<div class="top dropdown" id="search-bar">
  <span class="fa fa-search" id="search" data-toggle="dropdown"></span>                 

  <input type="text" id="search" class="form-control" placeholder="Search" data-toggle="dropdown"/> 

  <ul class="dropdown-menu"> 
    <li> Something </li>                   
  </ul> 
</div> <!--search bar -->

JS：

$('input#search').keypress(function(e) {
  if(e.keyCode == 13) {
    $('input#search').dropdown();
  }
});

问题是data-toggle="dropdown" 在我点击输入时触发下拉菜单。我只想在 ENTER 上触发它。

【问题讨论】：

标签： javascript twitter-bootstrap drop-down-menu

【解决方案1】：

我发现你的代码有几个问题。

id 分配错误，搜索设置为两个 span 图标的 id 和输入。
由于分配的原因，点击输入时触发下拉菜单
输入的 data-toggle=dropdown 属性。

根据您的代码中提到的问题，请尝试以下操作：

    <div class="top dropdown" id="search-bar">
      <span class="fa fa-search" id="btn-search" data-toggle="dropdown"></span>

      <input type="text" id="search" class="form-control" autocomplete="off" placeholder="Search" />

      <ul class="dropdown-menu">
        <li> Something </li>
      </ul>
    </div>
    <!--search bar -->


      $('input#search').keypress(function(e) {
      if (e.keyCode == 13) {
        $('#btn-search').click();
      }
    });

【讨论】：