Question

我想在输入中按下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上触发它。

Answer 1

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

ID分配错误，搜索设置为两个span图标的ID 并为输入。
由于分配了
，输入点击时会触发下拉列表 data-toggle =输入的下拉属性。

根据您提到的代码问题，请尝试以下方法：

    <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();
      }
    });

在输入中按下ENTER键时打开Bootstrap下拉列表

1 个答案: