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

Open Bootstrap dropdown when ENTER key is pressed in input

本文关键字：Bootstrap 下拉菜单 ENTER 输入      更新时间：2023-09-26

当输入中按下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"会触发下拉列表。我只想在输入时触发它。

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

  • id分配错误，搜索被设置为两个跨度图标的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();
      }
    });
相关文章：