Bootstrap 4 输入下拉列表。如何？

Question

下面是一个按钮下拉示例我使用 ma​​terial icons 和 google roboto mono font 进行了自定义，非常适合间距.我的问题是如何让输入以相同的方式表现？

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- GOOGLE FONT CSS - Roboto Mono -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,300,400,500,700&display=swap" rel="stylesheet">
<!-- GOOGLE FONT CSS - Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- FORM-ROW -->
<div class="form-row mb-2">
  <!-- ROW > COLUMN -->
  <div class="col">
    <!-- <label for="dropDown1" class="small my-0">DROPDOWN 1</label> -->
    <!-- DROPDOWN -->
    <div class="dropdown">
      <!-- BUTTON -->
      <button class="btn btn-outline-dark btn-block rounded-0" type="button" id="dropDown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <div class="d-flex justify-content-start align-items-center">
          <i class="material-icons md-24 mr-2">double_arrow</i>
          <span class="mr-auto" id="dropDownClockProjectText">DROPDOWN 1</span>
          <i class="material-icons md-24">expand_more</i>
        </div>
      </button>
      <!-- DROPDOWN > MENU -->
      <div class="dropdown-menu dropdown-menu-right dropdown-menu-scrollable w-100 rounded-0" aria-labelledby="dropDown1">
        <!-- MENU - HEADER -->
        <!-- <h6 class="dropdown-header">Dropdown header</h6> -->
        <!-- <div class="dropdown-divider"></div> -->
        <!-- MENU - LINK -->
        <a class="dropdown-item" data-item-id="1" href="#">ITEM 1</a>
        <div class="dropdown-divider"></div>
        <!-- MENU - LINK -->
        <a class="dropdown-item" data-item-id="2" href="#">ITEM 2</a>
        <div class="dropdown-divider"></div>
        <!-- MENU - LINK -->
        <a class="dropdown-item" data-item-id="3" href="#">ITEM 3</a>
        <div class="dropdown-divider"></div>

      </div>
    </div>
  </div>
</div>

如果我将按钮转换为文本类型的输入，目标将是在其中输入并显示过滤后的结果列表。有点像谷歌，但在用户键入过滤时，被过滤的数据已经下载。

Answer 1

好的。所以，在多付一点钱之后，我想出了这个解决方案。很高兴知道如何摆脱它们各自的链接在过滤期间隐藏的下拉分隔符。

// List Filter
$(document).ready(function() {
  // On KeyUp...
  $("#inputText9").on("keyup", function() {
    // No results have been found yet
    let result_found = false;
    
    // All values typed in to lower case...
    var search_string = $(this).val().toLowerCase();

    $("#dropDown9 a").filter(function() {
      // Hide if it does not match
      $(this).toggle($(this).text().toLowerCase().indexOf(search_string) > -1);

      if ($(this).text().toLowerCase().indexOf(search_string) > -1) {
        // Results found
        //$("#no_search_results").hide();
        result_found = true;
      }

      // No results found
      if (!result_found) {
        //$("#no_search_results").show();
      }
    });
  });
});

.material-icons.md-24 { font-size: 24px; }

.dropdown-menu-scrollable {
    height: auto;
    max-height: 244px; /* 5 items */
    overflow-x: hidden;
}

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- GOOGLE FONT CSS - Roboto Mono -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,300,400,500,700&display=swap" rel="stylesheet">
<!-- GOOGLE FONT CSS - Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="form-row mb-2">
  <!-- ROW > COLUMN -->
  <div class="col">
    <!-- <label for="dropDown1" class="small my-0">DROPDOWN 1</label> -->
    <!-- DROPDOWN -->
    <div class="dropdown">
      <!-- DROPDOWN > TOGGLER -->
      <!-- <a class="btn btn-secondary btn-block dropdown-toggle rounded-0" href="#" role="button" id="dropDown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown 1&nbsp;&nbsp;
        </a> -->
      <button class="btn btn-dark btn-block rounded-0" type="button" id="dropDown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <div class="d-flex justify-content-start align-items-center">
          <i class="material-icons md-24 mr-2">done</i>
          <span class="mr-auto" id="dropDownClockProjectText">DROPDOWN FILTER</span>
          <i class="material-icons md-24">expand_more</i>
        </div>
      </button>
      <!-- DROPDOWN > MENU -->
      <div class="dropdown-menu dropdown-menu-right dropdown-menu-scrollable w-100 rounded-0" aria-labelledby="dropDown1" id="dropDown9">
        <!-- MENU - HEADER -->
        <!-- <h6 class="dropdown-header">Dropdown header</h6> -->
        <!-- <div class="dropdown-divider"></div> -->

        <!-- INPUT TEXT -->
        <div class="col mb-2">
          <!-- <label for="inputText1">inputText1</label> -->
          <input type="text" class="form-control rounded-0" id="inputText9" aria-describedby="inputText1Desc" placeholder="Filter dropdown-items..">
        </div>
        <div class="dropdown-divider"></div>
        <!-- MENU - LINK -->
        <a class="dropdown-item searchable" data-item-id="1" href="./">dropdown-item 1</a>
        <div class="dropdown-divider"></div>
        <!-- MENU - LINK -->
        <a class="dropdown-item searchable" data-item-id="2" href="./">dropdown-item 2</a>
        <div class="dropdown-divider"></div>
        <!-- MENU - LINK -->
        <a class="dropdown-item searchable" data-item-id="3" href="./">dropdown-item 3</a>
        <div class="dropdown-divider"></div>
        <!-- MENU - LINK -->
        <a class="dropdown-item searchable" data-item-id="4" href="./">dropdown-item 4</a>
        <div class="dropdown-divider"></div>
        <!-- MENU - LINK -->
        <a class="dropdown-item searchable" data-item-id="5" href="./">dropdown-item 5</a>
        <div class="dropdown-divider"></div>
        <!-- MENU - LINK -->
        <a class="dropdown-item searchable" data-item-id="6" href="./">dropdown-item 6</a>
        <div class="dropdown-divider"></div>


      </div>
    </div>
  </div>
</div>

按数字搜索最高特异性。

Answer 2

这应该对你有帮助：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap Dropdown Example</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  </head>
  <body>
    <select class="custom-select">
      <option selected><i class="fa fa-angle-double-right"></i>Dropdown 1</option>
      <option value="1">Item 1</option>
      <option value="2">Item 2</option>
      <option value="3">Item 3</option>
    </select>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

这是我的最佳示例。我认为您不能添加自定义字体，因为 Bootstrap 安装了自己的字体。我认为您也不能添加图标，因为我在示例中尝试过。