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

Question

下面是一个按钮下拉示例，我用ma​​terial icons和谷歌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>

按数字搜索最高特异性。